Select Page

We’ve been doing a lot of lately is adding little touches of advanced CSS little animations and one thing we had implemented that we really liked are animated gradient backgrounds.

Animated gradient backgrounds are a thing of beauty. It is very simple yet very elegant. Most importantly, it is super easy to implement and it gives you that little extra wow factor that your clients or visitors will probably not be expecting. It’s gonna make your site look super modern and super cool and just help engage people more with it.

But…

“I don’t know how to do CSS codes? I can’t follow this!” Now, this might be an issue that would be bothering you by now. But you don’t have to worry about a thing.

In this article, we will be showcasing an online tool called CSS Gradient Animator. No extra coding, no headaches to face by thinking so hard what to put on the code. Just imagine the best possible color combination you can come up with and implement it on the gradient animator.

The best thing above all is it’s easy and FREE to use! I suggest you check them out now and find out how amazing this online tool is.



How to Create Animated Gradient Background?

Go to https://www.gradient-animator.com/.

Animated gradient background

Once there, you can adjust the design by tweaking the settings on the left side of the settings screen.

Both the “Gradient Angle” and “Scroll Angle” button adjusts the angles of the gradient as well as the direction of its animation.

Animated Gradient Background

The “Speed” slider adjust adjusts the speed of the animation. Slide right for slower or slide left for faster animation.

Also, you can add the colors of the gradient. Just click on the “Add color” button and select your desired color. As far as we have tried, there is no limit as to how many colors you can put on your gradient. As long as it fits your taste, then put as many as you would like or you would require.

After adjusting the settings that fit your preference, then hit “Preview”. Your gradient design should show on the background along with the animation and such. If you don’t like it and would like to start from scratch, just simply click on “Reset”.

How to integrate the chosen animated gradient background to your website?

Let’s say you have selected the perfect animated gradient background for your website. Now the golden question, how do you integrate it into your site?

Worry not, we will guide you all along the way. As you may have noticed by now, the codes on the right side also change, if you tweak the settings. Those are your CSS Codes. These codes are pure CSS and it doesn’t involve any JavaScript or anything like that.

Do take note, DO NOT COPY THE WHOLE THING. If you do, based on our experience, it wouldn’t work and then you’ll think it won’t work on your site, and then it’ll be a waste of time.

Step 1 – Identify the Codes

First, you need to identify which Codes are you putting to the CSS files, and which ones are you putting to the element you want to animate.

These Keyframes need to go on your CSS file.

Go to Divi > Theme Options. Scroll down and paste the code like the one showed above to the Custom CSS Section then save changes.

While these codes (shown below) should go to the element you want to add the gradient on.

Let’s assume you want the header of a page to animate. So go to Page > All pages then find the page you want to edit then click “Edit”.

Select the header section then to the “Advanced” tab. Then paste the code above to the “Main Element” section.

After pasting, remove the “.css-selector { and the other bracket }. So the code should look like this

    background: linear-gradient(94deg, #76f2d2, #d71482, #e60000);
    background-size: 800% 800%;

    -webkit-animation: AnimationName 28s ease infinite;
    animation: AnimationName 28s ease infinite;

The header of your selected page should have a gradient effect now.

As a freebie, allow me to share this code.

background-position: center;
-webkit-background-size: cover;
background-size: cover; content: ‘ ‘; position: absolute;
width: 100%;
height: 100%;
top: 0; left: 0;
background-image: url (http://REPLACEWITHIMAGEURL.jpg);
opacity: .1;

This code allows you to have an image behind the animated gradient background just for that extra wow factor. Just replace the http://REPLACEWITHIMAGEURL.jpg with the URL of your desired image. Then insert this code to the “Before” section under the advance tab of the same element, or in this case, the header of the page.

And that is it!

Summary

Animated gradient backgrounds are definitely great with regard to the whole design of the site. It can give that fresh look on your site that can get the attention of your visitors and potential customer.

Also credits to CSS Gradient Animator. It is a really great tool and it is super easy to use and we would recommend it to everyone who needs that gradient design on their site.

Watch the video below to see how to use the Gradient Animator tool in complete detail. Also in this video, we also showcased how to use these codes on a button on a form or on the header! So watch it to find out!


If you have any more questions, contact us or post a comment below and we will answer your concern.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Want more WordPress Tips click here. WebContempo Blog

Need help on making your website look better and more appealing? Contact us and let’s make it happen!