frontend.fyi

We can FINALLY animate gradients with CSS!

Gradients are one of those things that you can not animate in CSS. Until NOW.

Code on Github
🧑‍💻 🎥
... Almost ready!

Gradients are one of those things that you can not animate in CSS. Until NOW. With the introduction of the @ property rule in CSS, you can define the type of a css variable (css custom property). And defining a specific variable as being a color, now gives you the ability to animate a variable from one color to another. And if you then use that variable inside a gradient, that gradient will also animate from one color to another!

Let’s explore that together in today’s video!