Actions

Work Header

Rating:
Archive Warning:
Fandoms:
Additional Tags:
Language:
English
Series:
Part 10 of CSS GUIDES, Part 10 of Goddess_of_the_arena's CSS Playground
Collections:
That Good Golden Shit
Stats:
Published:
2024-09-01
Completed:
2024-10-13
Words:
1,613
Chapters:
2/2
Comments:
2
Kudos:
28
Bookmarks:
8
Hits:
761

Gradients for you

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!

Chapter 1

Chapter Text

GRADIENT N.1

radial-gradient(#ff0000 10px, #ffff00 30%, #ffa500 50%, #000000 100%);

Of course there was no answer, but I knew deep in my Core it would only be a matter of time before I would once more hear his low and deep voice, see those amazing piercing eyes of molten gold open and meet my gaze, see his muscled chest once again rise and fall with each breath. Soon, I thought, soon he would come back to me.

 

GRADIENT N.2

linear-gradient(to top right, #ffff00 0%, #FF0000 10%, #FF14E0 25%, #B833D3 42%, #28E2FF 60%, #248AFF 79%, #4006FF 90%, #00ff00 100%);

Of course there was no answer, but I knew deep in my Core it would only be a matter of time before I would once more hear his low and deep voice, see those amazing piercing eyes of molten gold open and meet my gaze, see his muscled chest once again rise and fall with each breath. Soon, I thought, soon he would come back to me.

 

GRADIENT N.3

radial-gradient(ellipse farthest-corner at center center,  #3FFF4B 0%, #13D46D 25%, #22D39E 42%, #28E2FF 54%, #248AFF 73%, #4006FF 100%);

Of course there was no answer, but I knew deep in my Core it would only be a matter of time before I would once more hear his low and deep voice, see those amazing piercing eyes of molten gold open and meet my gaze, see his muscled chest once again rise and fall with each breath. Soon, I thought, soon he would come back to me.

 

GRADIENT N.4

linear-gradient(to bottom right, #FF20E9 0%, #FF005D 30%, #AB30CA 50%, #FF005D 70%, #FF20E9 100%);

Of course there was no answer, but I knew deep in my Core it would only be a matter of time before I would once more hear his low and deep voice, see those amazing piercing eyes of molten gold open and meet my gaze, see his muscled chest once again rise and fall with each breath. Soon, I thought, soon he would come back to me.

 

GRADIENT N.5

linear-gradient(to right, #810404 0%, #000000 10%, #BA0000 15%, #000000 25%, #FF0000 50%, #000000 60%, #BA0000 80%, #000000 90%, #810404 100%);

Of course there was no answer, but I knew deep in my Core it would only be a matter of time before I would once more hear his low and deep voice, see those amazing piercing eyes of molten gold open and meet my gaze, see his muscled chest once again rise and fall with each breath. Soon, I thought, soon he would come back to me.

 

GRADIENT N.6

linear-gradient(45deg, #F8295A 0%, #FFA500 25%,  #EAE326 40%, #37EA1B 60%, #2A97EA 80%, #B926F8 100%);

Of course there was no answer, but I knew deep in my Core it would only be a matter of time before I would once more hear his low and deep voice, see those amazing piercing eyes of molten gold open and meet my gaze, see his muscled chest once again rise and fall with each breath. Soon, I thought, soon he would come back to me.

 

GRADIENT N.7

 conic-gradient(from 180deg at 50% 120%, #e85907, #eb5638,  #f83fa4, #a87cff, #00c477, #b8b500, #daac00, #deab02);

Of course there was no answer, but I knew deep in my Core it would only be a matter of time before I would once more hear his low and deep voice, see those amazing piercing eyes of molten gold open and meet my gaze, see his muscled chest once again rise and fall with each breath. Soon, I thought, soon he would come back to me.

 

GRADIENT N.8

linear-gradient(to top left, #833ab4, #FF1515,  #fcb045);

Of course there was no answer, but I knew deep in my Core it would only be a matter of time before I would once more hear his low and deep voice, see those amazing piercing eyes of molten gold open and meet my gaze, see his muscled chest once again rise and fall with each breath. Soon, I thought, soon he would come back to me.

 

GRADIENT N.9

linear-gradient(to bottom right, #ffb916, #FF3939,  #b300ff, #ffca00, #434dff);

Of course there was no answer, but I knew deep in my Core it would only be a matter of time before I would once more hear his low and deep voice, see those amazing piercing eyes of molten gold open and meet my gaze, see his muscled chest once again rise and fall with each breath. Soon, I thought, soon he would come back to me.

 

GRADIENT N.10

 radial-gradient(circle at 50% 100%, #f7ff0a, #f1bd00,  #de7d00, #bf3900, #920d03, #611405, #341103, #000000);

Of course there was no answer, but I knew deep in my Core it would only be a matter of time before I would once more hear his low and deep voice, see those amazing piercing eyes of molten gold open and meet my gaze, see his muscled chest once again rise and fall with each breath. Soon, I thought, soon he would come back to me.