I just think AO3 site skins are neat!

Unfortunately, I do not know how to create work skins. Work skins change the way a single fanwork looks on the site.

Giving AO3 a background gradient is really easy, especially with the help of online tools.

I use CSSgradient.io to figure out the CSS gradients for me. All I need to do is input the hex colour codes I want to use (or even just drag the colour bar back and forth to things I like) and adjust the percentage values for each colour (either by typing in a number or sliding a bar).

Once I've got the gradient look that I like, I can then scroll down and grab the CSS

Then it's just a matter of dropping it into a site skin.

#outer { background: linear-gradient(45deg,rgba(250, 218, 97, 1) 0%, rgba(255, 145, 136, 1) 50%, rgba(255, 90, 205, 1) 100%); }

#footer { background: transparent; }

#outer is the CSS selector for the background of AO3. By using this selector, your gradient will go from the top of the site to the very bottom of it.

If you just want the gradient to occupy the space between the header bar and the footer, you can use #inner instead.

If you want your AO3 to have a textured background (or any other image), first you need to find the background that you want to use. For this demonstration, I went to pixabay and searched for a seamless texture, and I grabbed this one, which I then modified in gimp.

The word seamless is important when you're looking for an image because the background image is going to repeat in order to cover the whole page*. As a result of that repeat, we want the sides to line up so that it appears to be one consistent texture across the site.

Once I've uploaded this texture to an image hosting site (like tumblr), I can insert it into my site skin code as the background.

Right click on the image and select copy image address from the menu that pops up. That will grab the image's URL. You can then insert that url into this code:

#outer { background: url("yourimageurl.png"); }

If you click on the ? next to CSS in the skin creation form, you can learn all of the code that AO3 allows, and if you scroll down far enough you'll see that images need to be in the formats jpg, gif, or png

Tumblr often hosts images in an pnj format, but if you erase the j and replace it with a g it works in a site skin.

If you save and use your site skin at this point, the only change from default will be the background image you've set. The rest of the site will look the same.