DEV Community

Cover image for Today I learned how to animate a text gradient in CSS (and JavaScript)

Today I learned how to animate a text gradient in CSS (and JavaScript)

Thomas C. Haflich on June 21, 2019

Cover photo by Clem Onojeghuo via Unsplash. I'm very sorry. And you're welcome. Look at that bad boy chug. I think I set my CPU on ...
Collapse
 
erinjzimmer profile image
🌈 Erin Zimmer

You can create a very similar effect with less shenanigans by animating the background-position. You set the background-size to double the width of the element, then move it, like so

Obviously my animation is a little different as it runs forwards and backwards, instead of just in one direction, but I'm pretty confident you could work out how to make it go all in one way.

Collapse
 
tchaflich profile image
Thomas C. Haflich

If I wanted to use your solution without modifying the animation itself, I'd probably try to constrain the gradient a little, because you get a lot of the green / yellow / orange part of the spectrum and not much of the red and purple parts.

For the unidirectional method, I'm thinking probably keyframes, so nice segue into CSS animations. I was already thinking of doing a part 2, so you gave me a pretty good idea for some other topics to hit on there.

Collapse
 
desi profile image
Desi

I LOVE THIS!

Collapse
 
val_baca profile image
Valentin Baca

Love it πŸ³οΈβ€πŸŒˆ

Collapse
 
andreasjakof profile image
Andreas Jakof • Edited

Yes you did it! Next step: In WASM?Maybe it’s a litter less CPU hungry ?

But Kudos for all the hoops you had go around!

Collapse
 
diek profile image
diek

Wow, epic. I'm giving you an unicorn and a page mark, i need to read this in detail.

Collapse
 
tonixx profile image
tonixx

Loving it! I've saved it for a future project

Collapse
 
osde8info profile image
Clive Da

when you said "here's the gist" i thought you meant "here's the gist" shows just how much github have already brainwashed me