Ali Soueidan

Ali Soueidan Front-End Developer

👋 Hello, I am Ali, a Developer based in Hamburg/Germany, and this is my Blog.

Animated CSS gradients

Background-Gradients can look nice, are very trendy and are supported relatively easily by any modern browser, as you can see at But if you want to animate them now, you have to do some tricks.

CSS gradients animation

Background gradients cannot be addressed directly via CSS keyframes – nevertheless, there are ways and means to animate them on the web — even without JavaScript.

How CSS Gradients Work

A CSS gradient is a color gradient that is treated by the browser as a background image and can be addressed by CSS as such. In the past, gradients were simply implemented in the form of a background image in the corresponding website. However, CSS gradients allow the developer more control over the visual appearance of the gradient and are also more powerful than a classic image — although they are ultimately treated like background images by the browser (in CSS, for example, CSS gradients are even defined under the background property).

“A gradient is an image that smoothly fades from one color to another. These are commonly used for subtle shading in background images, buttons, and many other things. The gradient notations described in this section allow an author to specify such an image in a terse syntax, so that the UA can generate the image automatically when rendering the page.” (W3C, in: “CSS Image Values and Replaced Content Module Level 3”,

A CSS gradient can be radial (circular) or linear (from one side to the other). These are several colors, which are drawn by the browser on a drawing area, in different, interlacing gradations. In this article we want to deal more with animation than with basics. A relatively interesting article on CSS-Gradient Basic Knowledge can be found at

Animation of linear gradients

Depending on the orientation of a process, different procedures are used to animate it.
With linear gradients, the color transition runs from one side of the element to the other. Accordingly, you can simulate a shift of the gradient by flooding it and then moving it from left to right, for example.

To achieve this, we can proceed as follows. We set the background size to over 100% (e.g. 200%), which means that the course extends over the container element and is therefore only visible in a section of it. In the following, we now drag the gradient in the visible area from one side to the other using the Background Position statement.

Animated linear overflow with safely changing background position.

We can achieve this relatively easily and efficiently with CSS keyframes. In the animation instruction we set the background position e.g. from X = 100 to X = 0. Now it looks to the user as if the color gradient really changes, although technically only the background moves from left to right.

When using multiple colors, relatively beautiful color games can be created, which neither the data volume, nor the computing power (of the device) of the user too much strain.

Animation of radial gradients

With a radial gradient, the color gradation runs in a circle from the inside to the outside. As with linear gradients, we can use the overflow principle and simply set the radial gradient to over 100% using background sizing. This now floods the container element again. The user only gets to see a section of the entire course.

Unlike before, the radial course in our example is not animated by background position. Here we use the Background-Size Property to change the CSS gradient accordingly. Now we change it in CSS keyframes and increase it from e.g. 150% to 250%.

Animated radial progression in overflow, with safely changing background size.

As a result, the user sees a changing course, which moves from the inside to the outside. In fact, you can also work with the position here to achieve a different animation effect, and you can also apply the animation to the linear gradient by changing the background size, for example to simulate a synchronous gradient change from the inside out to the edges.

If you’re interested in more information about animating background-gradients with CSS make sure to read part 2 of this article, where I provide an experimental approach to animate background gradients.