Animating Gradients in CSS

Have you ever tried to animate a background in CSS with a linear-gradient? If so, then you most likely stumbled upon the same issue as I did.

The following code show’s the most simple approach I would start with, when it comes to animate the background.

We define an animation on the body element which changes the gradient background from black-white to white-black.

However, we can see that it doesn’t work as expected. The color changes immediately, without any animation or smooth transition.

How to solve it

Some solutions to this are animating the background-position which generates the same effect. We can see it in the following code:

However, it somehow feels hacky to me, as we need to define an extra large background of which we then animate a changing position. Why can’t we just flip the colors of the gradient?

A better approach — using modern CSS @property

With the release of the CSS Properties and Values API, we actually can do this! This API exposes low-level functionality of the CSS rendering engine, enabling developers with more powerful styling.

In our case, we define a new CSS Custom Property. However, we use the @property syntax to declare it.

By setting the syntax property, we can specify the exact type of property, such as color, number, length, and many more.

Instead of changing the background property in our animation, we change the value of the colors of it. To make it work, we define two color variables using the @property syntax.

Then, we define an animation which changes their color from black to white and vice versa.

Finally, we apply this animation to our body element.

And this is what we get

A smooth transition between the color changes 🎉