F2U Gradient HTML

StarlitAritican

Info


Created
4 years, 7 months ago
Favorites
485

Profile


edit: Found out the coding for CSS gradients hell yee
Since editing it manually would be an absolute pain, I'd suggest using this website to get the code! Once you have the colors and degree you want, click "CSS - hex", and copy the one that ends in /* w3c */ . It will usually look something like "background: linear-gradient(150deg, #AA0952 0%, #AA0952 38%, #B62C46 47%, #FAF303 97%, #ffff00 100%); /* w3c */". As far as I know, this only works with backgrounds and not content boxes or text sadly. A WIP live preview if you want to make the gradient stay and not scroll, just add "fixed" before the ;

OKAY SO THANKS TO THIS POST https://toyhou.se/~forums/16.htmlcss-graphics/116583.gradient-progress-bar I was able to finally figure out what the inline css for gradients was
I've been working on a little header thing for my own wip format, so thought I might as well share these tidbits!

Link to all the coding!

All you have to do is change, remove, or add as many hex codes as you like in "background:linear-gradient(to bottom left, #eeff82, #82ff91, #829fff)"! To change the direction of the gradient, change after the "to" to either top, bottom, right, left, top right, top left, bottom right, or bottom left. The Gradient Line can be turned into a content box by extending the height!

this is all I know of for now, but I'll add more if i find anything else out

If you need some help thinking of colors that work together, feel free to check out this!

Header

Title

Character Name


Gender . Age . Species . Sexuality . Alignment . Personality . Location

Small Header

Header

Gradient Line

Gradient Progress Bar


A couple fun examples