In this article, I’ll show you how to animate a background gradient created with Elementor quite easily with a little CSS.
With Elementor Pro* you can easily add color gradients to background areas such as sections, columns or containers. Depending on the design, these gradients look quite nice, but they look even better with a decent animation.
Create gradient
To add a gradient to your container (or section/column), simply select the background type „Gradient“ under „Style“ in the container’s properties. Below this, color fields and sliders will appear, with which you can create your gradient.
Animation
To animate your created history now, it needs a small CSS code that you add.
Note: I recommend to add the CSS code in a child theme or in the Global Settings of Elementor as custom css instead of directly on the widget. To keep the process simple, I’ll show you how to add it directly to the widget in this article.
To do this, select the container (Section) again and this time go to the „Advanced“ tab. At the bottom you will find the item „Custom CSS“. In the field you simply insert the following code:
selector {
animation: gradientAnimation 3s ease infinite;
animation-direction: alternate;
background-size: 600% 100%;
}
@keyframes gradientAnimation {
0% {background-position: 0%}
100% {background-position: 100%}
}Multiple colors in gradient
Do you want more than the two adjustable colors in the gradient? Then you can also create the gradient using CSS instead of the Elementor settings. A CSS generator like gradient-animator.com is helpful for this. You can then replace the CSS code created there completely with the one from above. For this you only have to change the class name or if you insert the css-code directly into the widget, then just change the „.css-selector“ in the top of the css to „selector“.
