create animated gradient background with elementor

0

Hello guys, in this tutorial i will show you how we can add animated gradient background with elementor and without any plugin. i dont like using plugin for just this types 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 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 your 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. Means we need to copy the top part of our code. for eg.
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 customizer, theme or using any plugin) and insert that css code we copied to your section class. for eg.
.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 just under previous code.
.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%}
}
Thats it ! See how easy it is?

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Close Menu
This website uses cookies to provide you with the best service. By using our website, you agree to use the cookie. Learn More