It’s always best practice to minimize plugin usage in WordPress, as these only slow down your site. The less you use, the better. I am going to show you how to create a great animated gradient background like the one on my landing page https://etraffic.angeleowyn.com/ using a simple CSS code. This can be inserted onto any element within a webpage.

If you don’t know what CSS is, you can check out this page. It has great CSS and HTML resources, information and tutorials etc. This website even allows you to practice what you have just learned. https://www.w3schools.com So what exactly is CSS? Well, firstly, CSS stands for Cascading Style Sheets. And it is exactly that. It styles a webpage. Simply put, the difference between HTML and CSS is that HTML determines what goes on a webpage, and CSS determines how it looks. For example, you would use HTML to insert content (text) into your webpage, but you would then use CSS to style it (color, bold etc).

On the animated gradient I created on the landing page of this website, I used 6 colours that the animation moves through on an infinite cycle. These colours are

#756b2e #0bb69b #d9d166 #068f8b #0d0d0d #0d6073

Step 1 – Open Elementor 

Select the section where you want the background gradient to be, and go to Advanced on the edit panel on the left. In the CSS Class field, type in:

gradient_bg

This is the name of the CSS code for the gradient, so that the webpage knows what to style with the CSS code. You can call it anything you want, but make sure that you use the same name later in the process…

Step 2 – Create the animated gradient CSS

Now go to this online gradient generator https://www.gradient-animator.com

To make a simple vertical gradient, press the green ADD COLOUR button and either type in (or paste) the hex number of a colour (e.g. #000000 would be black) or you can choose a colour from the colour palette that opens.

If you are unfamiliar with hex numbers, or other web numbers for colours, check out this website: https://www.w3schools.com/colors/colors_picker.asp Once you have chosen the colour, press SELECT. Repeat this until you have all the colours you wish on your animation. Give your gradient a name. Any name will do. I chose “myanimatedgradient”. Make sure you tick all the browser supports. To see the animated gradient in action, just press PREVIEW

This will make a straightforward vertical gradient. If you want something more elaborate, play around with the controls. 

Step 3 – Inserting the generated CSS code into Elementor

First, you need to copy the first 2 parts of text/code:

Return to Elementor and your section and click on the CUSTOM CSS tab at the bottom of the Edit Section (on the left). Type in the class that you gave earlier but with a dot in front:

.gradient_bg

Followed by (without a space) the opening code bracket:

{

Press Enter twice so you have some space, and paste those 2 parts of code that you copied from the generator. Now close it all off with a “closing” code bracket:

}

It should look like this:

At this point, it is not animated yet because we haven’t finished 🙂

Step 4 – Complete the animation

Now copy the rest of the CSS code from the gradient animator, and paste it underneath the code you already have in – just before the closing code bracket (so that the bracket is still at the very end of all the CSS code). Now the animation should set in, and the code should look like this:

Once you have the CSS code in Elementor, it is also easy to edit it without having to return to the Gradient generator each time. You can replace the colours, for example,  by changing the hex numbers within your CUSTOM CSS in Elementor (the code you just pasted in). 

Have fun!!