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.
Now we have to visit a website. Its called CSS GRADIENT ANIMATOR
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.
Click the ” Preview” button to check how it will look.
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; |
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?
