As web designers, we don’t believe that life should be black and white, we must not choose sides; the world of colorful gradients offers a spectrum of possibilities that can inspire creativity and evoke emotions. So, what happens when color gradients and animation combine? The effects can significantly enhance the visual dynamics of a digital design.
As WordPress’s most popular page builder, Elementor provides a user-friendly interface with a wide range of features and design elements. However, when we want to create an animated gradient background, Elementor has no features to do that by default.
In this article, we’ll explore how to achieve this effect by adding custom CSS. Whether you want to apply an animated gradient background to the containers, sections, columns, or any widgets. We’ll cover the steps to make your website stand out.
Steps to Create Animated Gradient in Elementor
Step 1: Create Gradient Using the CSS Gradient Online Tool
First, we will use the CSS gradient tools, many of which can be found online, to create a gradient.
Go to your preferred online CSS gradient tool and use it to build a gradient that suits your style. After you have finished creating the gradient, please copy the generated CSS because we will require it later.
Step 2: Add the CSS Snippet
Next, we will add the CSS snippet to any Elementor element you want to add to the animated gradient background. In this example, we will add the animated gradient background to the container.
Add the CSS Class
Before adding the CSS snippet, we need to add a CSS class.
On the Container Settings panel, navigate to the Advanced tab, -> Layout, -> CSS Classes. Add the CSS class animated-gradient-background to the input field.
Add the Custom CSS
No, it’s time to add the CSS snippet to the element you want to make the background animated gradient. We will add the CSS snippet to the Elementor Custom CSS in this example. Make sure you have already updated to the pro version of Elementor, as this feature is exclusive to the pro version. However, you can still apply custom CSS to the free version of Elementor if you have no pro version.
Go to the Custom CSS input field (Advanced tab -> Custom CSS). Afterward, please copy the CSS snippet below and paste it into the available field.
/* Replace the four lines of CSS gradient code with your CSS gradient code */
.animated-gradient-background{
background-color:hsla(289,0%,0%,1);
background-image:
radial-gradient(at 91% 89%, hsla(74,100%,53%,1) 0px, transparent 50%),
radial-gradient(at 12% 24%, hsla(14,100%,50%,1) 0px, transparent 50%);
animation: gradient 7s ease infinite;
background-size: 200% 200%;
}
@keyframes gradient {
0% {
background-position: 0% 20%;
}
25% {
background-position: 100% 50%;
}
50% {
background-position: 50% 70%;
}
100% {
background-position: 0% 20%;
}
}
That is all. Don’t forget to save or publish your project if you want to.
What Does the Code Do?
This CSS code creates a container with an animated background. The background consists of CSS gradient code that we got from the CSS gradient online tool, which moves smoothly over time due to the defined keyframes.
Every 7 seconds, the background animation loops constantly, producing a dynamic and eye-catching impact. The gradient 7s ease infinite value can be modified to change the looping speed; a lower value input results in a faster animation speed.
Using a background-size: 200% 200% ensures that the animation has enough space to move and create a visible effect.
The Bottom Line
This article shows how you can easily create an animated gradient background in Elementor. Creating animated gradient backgrounds in Elementor can significantly enhance the visual appeal of your website.
You can achieve this effect without installing any Elementor addons. Even non-programmers can accomplish smooth results by using custom CSS within Elementor by following a few easy steps. This personalization guarantees that your design properly complements the aesthetics of your business, making your website stand out while still allowing for creative freedom.
