F2U Gradient HTML
StarlitAritican
- Created
- 4 years, 7 months ago
- Creator
- TheDemonicArtist
- 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!
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
Gradient Line
Gradient Progress Bar
A couple fun examples
Recent Images
No images.