How To Create An Animated Gradient Background.

Difficulty Rating :
Written byAires DaGraca

For this tutorial I am going to show you how to recreate the homepage background on iheartelementor.com. It may seem like a monstrous task but it is pretty simple.

So let’s begin.

To begin we need to open another tab and visit Animista . You can find a post I wrote on it here. The part of the site we will be using is located at the top labeled background.

After you select the Background option choose Color-change.

The option box provides you with four gradient options to choose from. Afterwards you can play with the timing if the animation is to fast or leave set to its default settings.

Bringing it all together.

Once you have your options all figured we need to collect the code and transfer it to Elementor. Look to the far right and click on the brackets to expose all the code. A window should popup similar to the one below.

Copy both the class and the keyframes and paste that into your sections CSS area or in the customizer.

Next we need to take the css class and add it to the section advanced area. Your class should look similar to this.

Include this class in the advanced area of your section.

If you followed my instructions you should now see the results of all your hard work. All that remains is to change the color codes to what ever you desire.

Thanks for reading 😀.

Was this article helpful?

Awesome, follow us on Twitter or Like us on Facebook

Disclosure: Some of the links above are affiliate links meaning at no additional cost to you, I will earn a commission if you click through and make a purchase.

Leave a Comment

Your email address will not be published. Required fields are marked *

By visiting iHeartElementor.com you accept our use of cookies and agree to our privacy policy.

Hello, would you like to take a survey before you leave.

Your answers will help us provide more and useful content.
Thank you for your time.