Create animated gradient background with elementor

Table of Contents

Hello guys, in this tutorial I will show you how we can add animated gradient background with elementor and without any plugin. I don’t like using plugins for just this type of simple effect. we will use just the elementor and some CSS.

First of all, add a section where you want to add the animated background. And give it a custom class name (Advanced > CSS Classes ). In my case, I am giving it a class of “gradient_bg” . You can give any name you want.


gradient 1 Maxkinon

Now we have to visit a website. Its called CSS GRADIENT ANIMATOR


gradient 2 Maxkinon

First of all, give your animation a name. You can give any name.
In my case, I am giving “myGradient”.
Then click the “Add color +” button to add your first color. Choose your first color. You can also use hex code as well.
You can add as many colors as you want. You can also define Gradient Angle and Scroll Angle and Speed.

Advertisements


gradient 3 Maxkinon


gradient 4 Maxkinon

Click the ” Preview” button to check how it will look.

gradient 5 Maxkinon

Now the main part. On the right-hand side you will see codes of our animation. We need to copy it and use it on our website.
First copy the code that ends before the “@-WebKit-keyframes” text. This means we need to copy the top part of our code.
for eg.

1
2
3
4
5
background: linear-gradient(270deg, #246655, #246655);
background-size: 400% 400%;
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;

gradient 6 Maxkinon
Now open your CSS editor (either from the customizer, theme, or using any plugin) and insert that CSS code we copied to your section class. for eg.

1
2
3
4
5
6
7
.gradient_bg{
background: linear-gradient(270deg, #246655, #246655);
background-size: 400% 400%;
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
}

Perfect! now copy the rest of the code from the website and paste it just under the previous code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.gradient_bg{
background: linear-gradient(270deg, #246655, #246655);
background-size: 400% 400%;
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

That’s it! See how easy it is?

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

My Orders

My Downloads

My Booked Services

My Subscriptions