Goddess_of_the_arena's CSS Playground
Series Metadata
Listing Series
Pages Navigation
-
How to create your work skins to have colored text by Goddess_of_the_arena
Fandoms: AO3 help - Fandom
22 Feb 2025
Tags
Summary
This is a guide to make text in color, be it for a single word, a full paragraph, several paragraphs in a row, or even the whole chapter, also in different sizes. The tutorial also contains ready-to-use codes for you to add to your work skins.
WARNING: all the codes in this guide were tested on a computer. I can't guarantee the effect when the work they are applied to is read on a mobile phone.
CHAPTER 1 is for pure colored text.
CHAPTER 2 is for text in gradient color, both linear gradient and radial gradient.
CHAPTER 3 contains the steps to combine gradient background with gradient text. It also contains the links to each of the other guides of my CSS GUIDES series
CHAPTER 4 contains the links to eight sites where you can create your gradients and get the ready-to-copy code to paste in the CSS code of the workskin.Series
- Part 1 of CSS GUIDES
- Part 1 of Goddess_of_the_arena's CSS Playground
-
How to create a work skin to have different fonts and colors in your works by Goddess_of_the_arena
Fandoms: css - Fandom, HTML - Fandom, Work Skins - Fandom, AO3 help - Fandom
30 May 2024
Tags
Summary
This is a tutorial on how to use different fonts on Ao3, how to make them in different sizes and how to make them colored as well.
It also contains two ready-to-use codes to give your fonts a gradient effect. There are both the code for the linear gradient effect and the code for the radial gradient effect.
CHAPTER 2 contains the visual examples of every font that you find in chapter 1.
WARNING: all the codes in this guide were tested on a computer. I can't guarantee the effect when the work they are applied to is read on a mobile phone.Series
- Part 2 of CSS GUIDES
- Part 2 of Goddess_of_the_arena's CSS Playground
-
How to create a work skin to highlight your text and create text boxes by Goddess_of_the_arena
Fandoms: HTML - Fandom, css - Fandom, AO3 help - Fandom, Work Skins - Fandom
25 Dec 2024
Tags
Summary
This guide will help you create your own work skins to add highlighted text and text boxes to your stories.
WARNING: all the codes in this guide were tested on a computer. I can't guarantee the effect when the work they are applied to is read on a mobile phone.
CHAPTER 1 highlight text (also in gradient colors!) and mixing highlight text with colored text and new fonts. You can also give the text the appearance of having been redacted by making it appear as a block of solid black.
CHAPTER 2 Text boxes, Deadpool's thought boxes and green-on-black text in the Matrix movies, making the border, text and background of your text box be in gradient colors, making the border dotted or dashed and using pictures and gifs as a border image. You can also put the text box inside a paragraph.
CHAPTER 3 creating a text box inside another text box, with also a ready-to-use code.
CHAPTER 4 putting two text boxes side by side to create the effect of journal (or book) pages.Series
- Part 3 of CSS GUIDES
- Part 3 of Goddess_of_the_arena's CSS Playground
-
How to create a work skin for glitch effect, mirror text, vertical text, upside down text and colored blockquote by Goddess_of_the_arena
Fandoms: HTML - Fandom, css - Fandom, AO3 help - Fandom, Work Skins - Fandom
22 May 2025
Tags
Summary
WARNING: all the codes in this guide were tested on a computer. I can't guarantee the effect when the work they are applied to is read on a mobile phone.
CHAPTER 1 is for the text with glitching effect similar to the Zalgo font, also in color, with different fonts and highlighted.
CHAPTER 2 is for the mirror effect, vertical text and upside down text, also in color, with different fonts and highlighted.
CHAPTER 3 is to create a negative mirror text effect (here in black and white) with the text side by side.
CHAPTER 4 is to give your blockquote a colored side border, top border or bottom border (also in gradient colors or using an image), a colored background (also in gradient colors) and different margin values.Series
- Part 4 of CSS GUIDES
- Part 4 of Goddess_of_the_arena's CSS Playground
-
How to create a work skin to add underline and create line dividers by Goddess_of_the_arena
Fandoms: css - Fandom, HTML - Fandom, AO3 help - Fandom, Work Skins - Fandom
02 Sep 2024
Tags
Summary
This tutorial contains the steps and ready to use codes to add underline to your text and create text dividers.
WARNING: all the codes in this guide were tested on a computer. I can't guarantee the effect when the work they are applied to is read on a mobile phone.
CHAPTER 1 is for underline, also mixing colored text with colored underline and in gradient colors.
CHAPTER 2 is for line dividers, also in gradient colors, with emoticon/emoji and with colored emoticons and neon effect emoticon/emoji.Series
- Part 5 of CSS GUIDES
- Part 5 of Goddess_of_the_arena's CSS Playground
-
How to create a work skin to have shadowed text, 3D text, bordered text and neon text by Goddess_of_the_arena
Fandoms: HTML - Fandom, css - Fandom, AO3 help - Fandom, Work Skins - Fandom
13 Jan 2025
Tags
Summary
This tutorial will give you the necessary steps to add shadowed text, bordered text, 3D text and neon text to your works, with ready-to-use codes available for you.
WARNING: all the codes in this guide were tested on a computer. I can't guarantee the effect when the work they are applied to is read on a mobile phone.
CHAPTER 1 is for the shadowed text.
CHAPTER 2 is for the bordered text and 3D text (new types of 3D shadow added!).
CHAPTER 3 is for the neon text.Series
- Part 6 of CSS GUIDES
- Part 6 of Goddess_of_the_arena's CSS Playground
-
How to create your work skin to change the background color and text style of your story by Goddess_of_the_arena
Fandoms: HTML - Fandom, css - Fandom, Work Skins - Fandom, AO3 help - Fandom
22 Feb 2025
Tags
Summary
This tutorial contains the steps to change the background color and text style of your story and also to make every chapter have a different background color or text style.
This tutorial contains ready-to-use codes.
WARNING: all the codes in this guide were tested on a computer. I can't guarantee the effect when the work they are applied to is read on a mobile phone.
CHAPTER 1 is to apply the background color and/or the text style to the whole work.
CHAPTER 2 is to give every chapter a different background color and/or text style.
CHAPTER 3 is to have a default background color or text style while still giving every chapter a different effect.
CHAPTER 4 is to combine gradient background and gradient text in your work.Series
- Part 7 of CSS GUIDES
- Part 7 of Goddess_of_the_arena's CSS Playground
-
How to add emoticon and emoji to your story title, username, chapter title, notes and summary by Goddess_of_the_arena
Fandoms: HTML - Fandom, css - Fandom, Work Skin - Fandom, Work Skins - Fandom, AO3 help - Fandom
03 Apr 2025
Tags
Summary
This guide will give you the codes to add cute emoticon (also in color!) and emoji to your story title, to your username, to the chapter title, to the summary and to the notes.
It contains ready-to-use codes. You can also see right away the effect of every code in the work.
Chapter 2 will explain how to add different emoticon/emoji to every chapter title.
Also, check out heark/hearker's guide here to know how to target the elements of a story (title, username, summary, notes and more)!Series
- Part 8 of CSS GUIDES
- Part 8 of Goddess_of_the_arena's CSS Playground
-
How to customize the first letters and first lines in your works and in your siteskins by Goddess_of_the_arena
Fandoms: AO3 help - Fandom
14 Apr 2026
Tags
Summary
This little guide will focus on the ::first-letter and ::first-line pseudo elements, suggested to me by user PeterLinderman in a comment. I experimented quite a bit on them and found out how to apply them in a lot of ways, both for workskins and siteskins.
CHAPTER 1: how to use the ::first-letter pseudo element in the whole work.
CHAPTER 2: using the ::first-line pesudo element in the whole work.
CHAPTER 3:using a different first-letter and first-line style for each chapter.
CHAPTER 4: how to have a first letter or first line in a matching text style with the line divider or blockquote.
CHAPTER 5: applying the codes to the work title, username, chapter title, summary and notes.
CHAPTER 6 (new): how to make the first letter/first line of each paragraph in a different style using the div command and the nth-child element.
CHAPTER 7 (formerly chapter 6): how to use the ::first-letter and ::first-line in a siteskin and even change the style of the work you're reading through your siteskin.Series
- Part 9 of Goddess_of_the_arena's CSS Playground
- Part 9 of CSS GUIDES
-
Gradients for you by Goddess_of_the_arena
Fandoms: css - Fandom, HTML - Fandom, AO3 help - Fandom, Work Skins - Fandom
13 Oct 2024
Tags
Summary
This little piece contains twenty fancy gradient effects, each with an example and the code for the gradient effect, that can be used for the gradient colored text, the background and/or border of a text box, line dividers, the background color of your chapters and much more.
You can find the tutorial for colored text here, the tutorial for text boxes here, the tutorial for line dividers here and the tutorial to change the background color of your whole story here.
And if you want to learn more amazing tricks with CSS for changing the style of the title, username and much more, check out heark/hearker's awesome guide here!Series
- Part 10 of CSS GUIDES
- Part 10 of Goddess_of_the_arena's CSS Playground
-
How to change the opacity of your background without affecting the text by Goddess_of_the_arena
Fandoms: No Fandom, AO3 help - Fandom
30 May 2026
Tags
Summary
This guide will give you the codes to make a portion of your chapter or of your text box have a different level of opacity, without affecting the visibility of the text.
Series
- Part 11 of CSS GUIDES
- Part 11 of Goddess_of_the_arena's CSS Playground
-
How to combine hover and transition to style your works by Goddess_of_the_arena
Fandoms: AO3 help - Fandom, No Fandom
24 Jul 2026
Tags
Summary
This guide will show you how to use the combination of hover and transition in you workskins to achieve several visual effects in your works.
CHAPTER 1: changing color, font, size of the text, zoom effect, gradient text appearing on hover, gradient background appearing on hover, blockquote style changing on hover.
CHAPTER 2: glitching text that disappears on hover, neon text, shadowed text and 3D text.
CHAPTER 3: rotating text and making emoticon and emoji appear on hover.
CHAPTER 4: rotating images, rotating text boxes, rotating text box with text and image in the same page, rotating two text boxes side by side like pages in a journal, creating the effect of turning a card with two images/two text boxes/an image and a text box.
CHAPTER 5: rotating card with a text box and a video, or with an image and a video, rotating text box with text and video in the same page.
CHAPTER 6: codes for siteskin to add to the dashboard an appearing gradient background on hover.
CHAPTER 7: using the front/back inside the tooltiptext.Series
- Part 12 of CSS GUIDES
- Part 12 of Goddess_of_the_arena's CSS Playground
-
How to create a site skin to change the background color and font of the site by Goddess_of_the_arena
Fandoms: css - Fandom, HTML - Fandom, AO3 help - Fandom, Site Skin - Fandom, Ao3 Skins - Fandom
30 Oct 2025
Tags
Summary
This work contains an explanation on what the codes in a site skin do. This will allow you to customize the site with different background colors, text colors, new fonts and much more.
In each chapter you will find ready-to-use codes, each giving a part of the site a different style, in order to help you visualize immediately which part is affected by which code.
CHAPTER 2: changing the color/font/background color of each level of the "Sort and filter" column, adding cute emoticon/emoji at the sides of each level of it and to the navigation buttons.
CHAPTER 3: adding a border to some parts of the site using an image or a gif as your border-image.
CHAPTER 4: adding emoticon/emoji to the greetings, the dashboard and the tags.
CHAPTER 5 contains the links to all my guides for workskins and siteskins and to the complete siteskins I posted.Series
- Part 1 of Site skin experiments
- Part 13 of Goddess_of_the_arena's CSS Playground
-
How to create a site skin to have gradient text by Goddess_of_the_arena
Fandoms: AO3 Skin - Fandom, HTML - Fandom, css - Fandom, AO3 help - Fandom
05 Aug 2025
Tags
Summary
This work will explain you which codes to add to your site skin to have certain parts of the site appear in gradient text. It also contains the codes to make each level of the dashboard and of the "sort and filter" column have a different gradient color.
The second and third chapter each contain a complete site skin with gradient text ready for you to copy-paste.
You can also find twenty ready-made codes for gradients in my work "Gradients for you" here.Series
- Part 2 of Site skin experiments
- Part 14 of Goddess_of_the_arena's CSS Playground
-
Tags
Summary
This work contains ready-to-use siteskins that will give the site a gradient background. Each site skin is in different shades of color and you can see what each background looks like in the summary of its chapter.
Siteskin n.9 and siteskin n.18 have a background in dark shades of color and light yellow text for those who prefer the dark mode.
Siteskins from n.12 to n.16 are fruit-themed.
Some siteskins add a border to some parts of the site, mainly the main page, the dashboard and the work boxes.
You can find more info about adding a border (also using an image or a gif) to some parts of the site in my guide here.
You can also find twenty ready-made codes for gradients in my work "Gradients for you" here.Series
- Part 3 of Site skin experiments
- Part 15 of Goddess_of_the_arena's CSS Playground
-
Neon text site skin by Goddess_of_the_arena
Fandoms: HTML - Fandom, css - Fandom, AO3 help - Fandom, Site Skins - Fandom
15 Oct 2025
Tags
Summary
This site skin will give neon text to the greetings, the dashboard, the "sort and filter" column, the summary and the tags.
The relationship tags have a golden halo, the character tags have a blue halo and the freeform tags have a green halo. When you hover over them, the relationship tags change to orange text with white background, the character tags turn to blue text with white background and the freeform tags turn to dark green text with white background. The codes to make the tags change color when you hover over them are in bold and highlighted in different colors in chapter 1.
The greetings are in font Lucida Calligraphy.
Also, each level of the dashboard has a different neon color.
CHAPTER 2 contains the neon siteskin with the colors in a different order and adds emoticons to the sides of each level of the dashboard and each element of the greetings.
CHAPTER 3 adds the codes to give each level of the "Sort and filter" column a different neon color and add little emoticon at the sides of each level.
CHAPTER 4 contains the neon siteskin with complete black background for the whole site for those who prefer the dark mode.Series
- Part 4 of Site skin experiments
- Part 16 of Goddess_of_the_arena's CSS Playground
-
Spooky Halloween themed site skin by Goddess_of_the_arena
Fandoms: css - Fandom, HTML - Fandom, Site Skins - Fandom, AO3 help - Fandom, Ao3 Skins - Fandom
17 Sep 2025
Tags
Summary
This is a complete Halloween-themed site skin with black background and orange text in Papyrus font, with the addition of cute emoji to the greetings and to every level of the dashboard.
The current dashboard level (meaning the one of the page you're visualizing in that moment) has orange background with black text and cute little black cats on the sides.
When you hover over them, the relationship tags change to white background and black text, the character tags change to blood red background and white text and the freeform tags change to orange background and black text.
CHAPTER 2 contains the codes to add cute emoji at the sides of each level of the "Sort and Filter" column.
I also put the codes to add a border of cute little ghosts to the site in the notes at the end of chapter 1 and the code to change the Ao3 logo with a cute cartoon pumpkin in the notes at the end of chapter 2.
I hope you'll like it! 🎃
WARNING: Some devices don't support the Papyrus font, so they will show the default font.Series
- Part 5 of Site skin experiments
- Part 17 of Goddess_of_the_arena's CSS Playground
-
Wild West site skin by Goddess_of_the_arena
Fandoms: HTML - Fandom, Site Skins - Fandom, AO3 help - Fandom, css - Fandom
25 Sep 2025
Tags
Summary
This work contains a complete Wild West-style site skin, with a gradient yellowish background, brown text and amazing Wild West-themed emoji at the sides of the greetings, of each level of the dashboard and each level of the "Sort and filter" column.
The site skin comes in two versions: the version in chapter 1 uses the standard Ao3 font (so there is no "font-family" line in the codes), while the version in chapter 2 uses the custom font Gashroad.
I added the link for the free download of the Gashroad font in the notes at the head of chapter 2.
Both versions of the site skin also change the Ao3 logo in the upper left side of the page with the image of a smiling cowboy face emoji. Also, when you hover over them, the relationship tags change to yellow background and red text, the character tags change to blue background with white text and the freeform tags change to white background and dark green text.Series
- Part 6 of Site skin experiments
- Part 18 of Goddess_of_the_arena's CSS Playground
-
Tags
Summary
This is a complete siteskin that will give your site a lovely image of flowers for the header and footer, the text is all in cursive (font Lucida Calligraphy to be more specific) and the first letter of the work boxes is decorated.
The warning tags have white background and red text, the relationship tags have bright yellow background, the character tags have bright green background and the freeform tags have blue background.
The code for the decorated first letter is bolded.
If you want to know more about customizing the first letter (or first line) of your works and your siteskins, check out my guide here.Series
- Part 7 of Site skin experiments
- Part 19 of Goddess_of_the_arena's CSS Playground
-
Pokémon-type inspired siteskins by Goddess_of_the_arena
Fandoms: No Fandom, AO3 help - Fandom
27 Apr 2026
Tags
Summary
This work contains nineteen complete siteskins: one only changes the Ao3 logo and the looks of the dashboard, buttons and greetings; the other eighteen are one for each Pokémon type.
All the siteskins have the buttons, the dashboard and the greetings with white background and black text like the old-fashioned fighting screen, with a black right arrow appearing on the left side of the text when you hover over them. All the siteskins also have the image of a Pokéball instead of the Ao3 logo.
Each siteskin has a gradient background in shades of the colors of the type symbol (for example, shades of purple for the poison type and shades of green for the grass type).
The header and footer use as their background the repeated image of a Pokémon of the corresponding type (for example, Charmander for fire type and Dratini for dragon type).Series
- Part 8 of Site skin experiments
- Part 20 of Goddess_of_the_arena's CSS Playground