Actions

  • Entire Work
  • Hide Creator's Style

Work Header

Rating:
Archive Warning:
Fandom:
Additional Tags:
Language:
English
Series:
Part 3 of Site skin experiments , Part 13 of Goddess_of_the_arena's CSS Playground
Stats:
Published:
2025-08-04
Updated:
2026-05-05
Words:
17,311
Chapters:
26/?
Comments:
23
Kudos:
18
Bookmarks:
5
Hits:
1,441

Gradient background siteskins

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.

Chapter 1: Delicate shades

Summary:

This site skin will give the site a gradient background in light shades of pink, blue and yellow and it will highlight the relationship tags in white (but when you hover over them, the background of the tag will turn yellow and the words will turn red).
The code to make the background and text color of the relationship tags change when you hover over them is the last code in the page.
The codes highlighted in aqua green add cute emoji at each level of the "Sort and filter" column , while the codes highlighted in yellow add cute heart emoji at the sides of each level of the dashboard.

Notes:

(See the end of the chapter for notes.)

Chapter Text

#header #greeting a {
  color: #000000;
}

#header ul a.dropdown-toggle {
  color: #000000;
}

#header fieldset input#site_search.text {
  background: linear-gradient(to top right, #62C8FF 0%, #FD7DFF 25%, #FFDA6C 50%, #FD7DFF 75%, #62C8FF 100%);
  color: #000000;
}

#header,
#outer.wrapper {
  background: linear-gradient(to top right, #62C8FF 0%, #FD7DFF 25%, #FFDA6C 50%, #FD7DFF 75%, #62C8FF 100%);
  color: #000000;
}

#header .primary,
#inner.wrapper,
#main,
#inner,
body,
.listbox .index,
li.relationships a {
  background: linear-gradient(to top right, #62C8FF 0%, #FD7DFF 25%, #FFDA6C 50%, #FD7DFF 75%, #62C8FF 100%);
  border: solid 2px #1e90ff;
  color: #000000;
}

#header .heading {
  background: linear-gradient(to top right, #62C8FF 0%, #FD7DFF 25%, #FFDA6C 50%, #FD7DFF 75%, #62C8FF 100%);
  border: solid 2px #1e90ff;
  color: #000000;
}

#header {
  background: linear-gradient(to top right, #62C8FF 0%, #FD7DFF 25%, #FFDA6C 50%, #FD7DFF 75%, #62C8FF 100%);
  border-right: solid 2px #1e90ff;
  border-left: solid 2px #1e90ff;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  color: #000000;
}

#greeting {
  color: #000000;
  border: solid 2px #1e90ff;
  background: linear-gradient(to top right, #62C8FF 0%, #FD7DFF 25%, #FFDA6C 50%, #FD7DFF 75%, #62C8FF 100%);
}

#header .primary li,
#header .primary li a,
#greeting li,
#greeting li a {
  color: 000000;
  border: solid 2px #1e90ff;
}

#footer,
#footer h4.heading,
#footer .actions a:link,
#footer .actions a,
#footer .action,
#footer .action:link,
#footer .actions button,
#footer .actions input,
#footer input[type=“submit”],
#footer button,
#footer .actions label {
  color: #000000;
  text-shadow: none;
  background: linear-gradient(to top right, #62C8FF 0%, #FD7DFF 25%, #FFDA6C 50%, #FD7DFF 75%, #62C8FF 100%);
}

#main .verbose legend,
.comment h4.byline,
.reading h4.viewed,
.unread,
.child,
.unwrangled,
.unreviewed,
.verbose fieldset,
form ul.notes,
#modal,
.ui-sortable li,
.comment_notice,
.kudos_notice,
div.dynamic,
#ui-datepicker-div,
.ui-datepicker table {
  background: linear-gradient(to top right, #62C8FF 0%, #FD7DFF 25%, #FFDA6C 50%, #FD7DFF 75%, #62C8FF 100%);
  border: solid 2px #1e90ff;
  color: #000000;
}

#header .actions a:hover,
#header .actions a:focus,
#header .dropdown:hover a,
#header .open a {
  color: black;
}

#header .dropdown:hover a,
ul.menu.dropdown-menu {
  background: linear-gradient(to top right, #62C8FF 0%, #FD7DFF 25%, #FFDA6C 50%, #FD7DFF 75%, #62C8FF 100%);
  border: solid 2px #1e90ff;
}

.flash,
.notice {
  background-color: linear-gradient(to right, #B7DEED 0%, #71CEEF 25%, #21B4E2 75%, #B7DEED 100%);
  border: solid 2px #1e90ff;
  color: #000000;
}

form .notice,
ul.notes,
.caution {
background: linear-gradient(to top right, #62C8FF 0%, #FD7DFF 25%, #FFDA6C 50%, #FD7DFF 75%, #62C8FF 100%);
  border: solid 2px #1e90ff;
  color: #000000;
}

.alert.flash,
.error,
.comment_error,
.kudos_error {
  background: linear-gradient(to top right, #62C8FF 0%, #FD7DFF 25%, #FFDA6C 50%, #FD7DFF 75%, #62C8FF 100%);
  color: #000;
  border: solid 2px #1e90ff;
}

h2 {
  font-size: 1.286em;
  line-height: 1;
  margin: 0.5375em 0;
  border: solid 2px #1e90ff;
  color: #000000;
}

.listbox,
.draft,
.dropdown,
fieldset fieldset.listbox,
fieldset,
form dl,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff,
.dynamic form fieldset,
.toggled form fieldset,
.toggled form dl,
.secondary .toggled form,
.secondary form,
.required .autocomplete {
  background: linear-gradient(to top right, #62C8FF 0%, #FD7DFF 25%, #FFDA6C 50%, #FD7DFF 75%, #62C8FF 100%);
  color: #000000;
}

.filters .submit input {
  color: #000000;
  background: linear-gradient(to top right, #62C8FF 0%, #FD7DFF 25%, #FFDA6C 50%, #FD7DFF 75%, #62C8FF 100%);
  box-shadow: 0 0 4px #000;
  border: solid 2px #1e90ff;
}

.filters .rating .expander:before {
  content: '❤️ ';
  font-size: 16px;
}

.filters .rating .expander:after {
  content: ' ❤️';
  font-size: 16px;
}

.filters .warning .expander:before {
  content: '🧡 ';
  font-size: 16px;
}

.filters .warning .expander:after {
  content: ' 🧡';
  font-size: 16px;
}

.filters .category .expander:before {
  content: '💛 ';
  font-size: 16px;
  text-shadow: 0 0 3px #000000;
}

.filters .category .expander:after {
  content: ' 💛';
  font-size: 16px;
  text-shadow: 0 0 3px #000000;
}

.filters .fandom .expander:before {
  content: '💚 ';
  font-size: 16px;
}

.filters .fandom .expander:after {
  content: ' 💚';
  font-size: 16px;
}

.filters .character .expander:before {
  content: '💙 ';
  font-size: 16px;
}

.filters .character .expander:after {
  content: ' 💙';
  font-size: 16px;
}

.filters .relationship .expander:before {
  content: '💖 ';
  font-size: 16px;
}

.filters .relationship .expander:after {
  content: ' 💖';
  font-size: 16px;
}

.filters .freeform .expander:before {
  content: '💜 ';
  font-size: 16px;
}

.filters .freeform .expander:after {
  content: ' 💜';
  font-size: 16px;
}

.filters .crossover .expander:before {
  content: '❤️ ';
  font-size: 16px;
}

.filters .crossover .expander:after {
  content: ' ❤️';
  font-size: 16px;
}

.filters .status .expander:before {
  content: '🧡 ';
  font-size: 16px;
}

.filters .status .expander:after {
  content: ' 🧡';
  font-size: 16px;
}

.filters .words .expander:before {
  content: '💚 ';
  font-size: 16px;
}

.filters .words .expander:after {
  content: ' 💚';
  font-size: 16px;
}

.filters .dates .expander:before {
  content: '💙 ';
  font-size: 16px;
}

.filters .dates .expander:after {
  content: ' 💙';
  font-size: 16px;
}

li.comment,
#ibox_wrapper,
#ibox_content,
textarea:focus,
input:focus,
select:focus,
li.blurb,
.listbox li.blurb,
.statistics .index li:nth-of-type(even),
dl.meta,
dl.index dd {
  background: linear-gradient(to top right, #62C8FF 0%, #FD7DFF 25%, #FFDA6C 50%, #FD7DFF 75%, #62C8FF 100%);
  color: #000000;
}

.work.own,
.thread .even,
.bookmark .user,
.bookmark .user .header,
textarea,
input,
select,
option,
.toggled form,
.dynamic form,
.autocomplete .dropdown ul,
.autocomplete .dropdown ul li,
.autocomplete input {
  background: linear-gradient(to top right, #62C8FF 0%, #FD7DFF 25%, #FFDA6C 50%, #FD7DFF 75%, #62C8FF 100%);
  border: solid 2px #1e90ff;
  color: #000000;
}

li.blurb,
.listbox li.blurb {
  box-shadow: 0px 0px 4px #000;
  border: solid 1px #1e90ff;
  border-radius: 10px;
  color: #000000;
}

.blurb .header {
  border: solid 2px #1e90ff;
  color: #000000;
}

.blurb .datetime {
  color: #000000;
  background: linear-gradient(to top right, #62C8FF 0%, #FD7DFF 25%, #FFDA6C 50%, #FD7DFF 75%, #62C8FF 100%);
}

.bookmark .user .datetime {
  background: linear-gradient(to top right, #62C8FF 0%, #FD7DFF 25%, #FFDA6C 50%, #FD7DFF 75%, #62C8FF 100%);
  color: #000;
}

#header input[type="submit"],
#main .actions a,
#main .actions a:visited,
#main .action,
#main .actions input,
#main input[type="submit"],
#main .actions label {
  background: linear-gradient(to top right, #62C8FF 0%, #FD7DFF 25%, #FFDA6C 50%, #FD7DFF 75%, #62C8FF 100%);
  color: #000;
  border: solid 2px #1e90ff;
}

#dashboard,
#dashboard ul,
#dashboard .secondary,
#dashboard a {
  background: linear-gradient(to top right, #62C8FF 0%, #FD7DFF 25%, #FFDA6C 50%, #FD7DFF 75%, #62C8FF 100%);
}

#dashboard.own {
  border-color: transparent;
}


#dashboard .current {
  background: #ffffff;
}

#dashboard .current:before {
  content: '💜 ';
}

#dashboard .current:after {
  content: ' 💜';
}

#dashboard li:nth-of-type(5n+1) a:before {
  content: '❤️  ';
  font-size: 16px;
}

#dashboard li:nth-of-type(5n+1) a:after {
  content: ' ❤️';
  font-size: 16px;
}

#dashboard li:nth-of-type(5n+2) a:before {
  content: '🧡 ';
  font-size: 16px;
}

#dashboard li:nth-of-type(5n+2) a:after {
  content: ' 🧡';
  font-size: 16px;
}

#dashboard li:nth-of-type(5n+3) a:before {
  content: '💛 ';
  font-size: 16px;
  text-shadow: 0 0 3px #000000;
}

#dashboard li:nth-of-type(5n+3) a:after {
  content: ' 💛';
  font-size: 16px;
  text-shadow: 0 0 3px #000000;
}

#dashboard li:nth-of-type(5n+4) a:before {
  content: '💚 ';
  font-size: 16px;
}

#dashboard li:nth-of-type(5n+4) a:after {
  content: ' 💚';
  font-size: 16px;
}

#dashboard li:nth-of-type(5n+5) a:before {
  content: '💙 ';
  font-size: 16px;
  text-shadow: 0 0 3px #0000ff;
}

#dashboard li:nth-of-type(5n+5) a:after {
  content: ' 💙';
  font-size: 16px;
  text-shadow: 0 0 3px #0000ff;
}

#header,
#outer.wrapper {
  background: linear-gradient(to top right, #62C8FF 0%, #FD7DFF 25%, #FFDA6C 50%, #FD7DFF 75%, #62C8FF 100%);
  color: #000000;
}

#main .current {
  background: #ffffff;
  color: #1e90ff;
  border-color: #1e90ff;
}

.filters .expander {
  color: #000000;
  border: solid 2px #1e90ff;
}

li.relationships a.tag {
  background: #ffffff;
}

li.relationships a:hover,
li.relationships a:visited:hover,
dl.meta dd.relationship a.tag:hover,
dl.meta dd.relationship a.tag:visited:hover {
  background: #ffff00;
  border: 1px solid #ff0000;
  color: #ff0000;
}

Notes:

If you want to add a pink/purple glitter border to the main page using an image from the net, you can remove the #main, line from this code:

 

#header .primary,
#inner.wrapper,
#main,
#inner,
body,
.listbox .index,
li.relationships a {
background: linear-gradient(to top right, #62C8FF 0%, #FD7DFF 25%, #FFDA6C 50%, #FD7DFF 75%, #62C8FF 100%);
  border: solid 2px #1e90ff;
  color: #000000;
}

 

so that it becomes like this:

#header .primary,
#inner.wrapper,
#inner,
body,
.listbox .index,
li.relationships a {
background: linear-gradient(to top right, #62C8FF 0%, #FD7DFF 25%, #FFDA6C 50%, #FD7DFF 75%, #62C8FF 100%);
  border: solid 2px #1e90ff;
  color: #000000;
}

and then you add this code to the site skin:

#main {
border: 25px solid transparent;
border-image: url('https://img.freepik.com/vettori-premium/texture-verticale-glitterata-con-sfumatura-di-colore-rosa-viola_522680-411.jpg') 5% round;
background: linear-gradient(to top right, #62C8FF 0%, #FD7DFF 25%, #FFDA6C 50%, #FD7DFF 75%, #62C8FF 100%);
}