Skip to content

re: Today I learned how to animate a text gradient in CSS (and JavaScript) VIEW POST


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.


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.

code of conduct - report abuse