Key Elements

Elementor

How To Create An Animated Gradient Background.

How To Create An Animated Gradient Background.

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.

[css]color-change-2x[/css]

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 😀.

Leave a Reply