How to Create Gradient Background Animation in Divi (2 Ways)

Posted on February 7, 2020 by in Divi Resources | 14 comments

How to Create Gradient Background Animation in Divi (2 Ways)

Gradient background animation can be a beautiful design technique for making background colors come to life on your website. It is a perfect solution for those who want something more lifelike than a static background color without having to resort to slow-loading video background. The basic idea behind gradient background animation is to use CSS to create enlarge and animate a gradient background to create seamless moving color transitions.

In this tutorial, we are going to show you two ways you can create gradient background animations in Divi. The first combines a custom CSS snippet that animates the gradient colors chosen in Divi’s built-in settings. The second way animates multiple modules with a radial gradient background over a row or section background. The setup is actually quite simple for such a beautiful result.

Let’s get started!

Sneak Peek

Here is a sneek peek at both ways we can create gradient background animation in Divi.

#1 Gradient Background Animation with CSS Snippet and Divi’s Background Option

Divi Gradient Background Animation

#2 Gradient Background Animation Using Divi Modules with Radial Gradient Backgrounds

Divi Gradient Background Animation

Download the Layout for FREE

To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

To import the layout to your page, simply extract the zip file and drag the JSON file into the Divi Builder.

Let’s get to the tutorial, shall we?

What You Need to Get Started

expanding corner tabs

To get started, you will need to do the following:

  1. If you haven’t yet, install and activate the Divi Theme.
  2. Create a new page in WordPress and use the Divi Builder to edit the page on the front end (visual builder).
  3. Choose the option “Build From Scratch”.

After that, you will have a blank canvas to start designing in Divi.

Part 1: Creating a Gradient Background Animation with CSS Snippet and Divi’s Background Option

To kick things off, add a one-column row to the default section in the Divi Builder.

Divi Gradient Background Animation

Section Settings

Then update the section settings with a background image. Our gradient background is going to be added to our row so it will lay on top of this image.

Then update the padding as follows:

  • Padding: 0px top, 0px bottom

Divi Gradient Background Animation

Row and Column Settings

Column Settings

Open the row settings and then update the column padding as follows:

  • Padding: 12vw top

Then add the following custom CSS to the Column Main Element:

height: 40vw;

Divi Gradient Background Animation

Row Settings

Gradient Background

Now we can add the gradient background to the row. Make sure to make the gradient colors semi-transparent if you want to see the background image of the section.

Update the row settings as follows:

  • Gradient Background Left Color: rgba(12,113,195,0.8)
  • Gradient Background Right Color: rgba(131,0,233,0.8)
  • Gradient Type: Linear
  • Gradient Direction: 45deg

Divi Gradient Background Animation

Size

Next, update the size of the row as follows:

  • Width: 100%
  • Max Width: 100%

Divi Gradient Background Animation

Custom CSS Class

Now that our gradient background is in place, we need to add the animation via custom CSS. Before we add the CSS code, we need to add a custom CSS class to target this specific row.

Go to the advanced tab and add the following CSS Class:

  • CSS Class: animate-gradient

Divi Gradient Background Animation

Add Code Module

Once the CSS Class has been added to the row, add a code module to the row.

Divi Gradient Background Animation

Paste CSS in Code Module

Then paste the following CSS code inside the Code Module Settings Code box:

.animate-gradient {
	background-size: 400% 400%;
	animation: gradient 5s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

Make sure to wrap the code in the <style></style> tags since we are adding it to the HTML of the page.

Divi Gradient Background Animation

Result

Here is the result so far. The gradient background has been enlarged by 400% of the original size and is being animated by moving to the left and right.

Divi Gradient Background Animation

Add Call to Action

To complete the design, let’s add a call to action module to stand in as some content.

Divi Gradient Background Animation

Call to Action Settings

Content

Update the content as follows:

  • Add Title
  • Add Button Text
  • Add Body Text
  • Button Link URL: #
  • Use Background Color: NO

Divi Gradient Background Animation

Design

Jump over to the design tab and update the following:

  • Title Font: Kaushan Script
  • Title Text Size: 4vw (desktop), 30px (phone)
  • Title Line Height: 1.4em
  • Body Font: Roboto
  • Button Text Size: 16px
  • Button Text Color: #555555
  • Button Background: #ffffff
  • Button Border Width: 0px
  • Button Border Radius:30px
  • Button Letter Spacing: 3px
  • Button Font: Roboto Condensed
  • Button Font Weight: Bold

Divi Gradient Background Animation

Result

Now check out the result on the live page with the call to action content in place. This would be a great header for your website!

Divi Gradient Background Animation

Don’t forget that you can easily change the colors of your row background to whatever you want. The code will continue to work behind the scenes to animate the background for you.

Divi Gradient Background Animation

If you’re familiar with CSS, you can adjust the speed and direction of the animation by changing the values for the animation properties.

Divi Gradient Background Animation

Part 2: Creating Gradient Background Animation Using Divi Modules with Radial Gradient Backgrounds

The second way to create gradient background animation in Divi involves animating one (or more) modules, each with a radial gradient background. This design technique gives you full control over the animation of each module without having to rely on external custom CSS. Plus, it opens the door for limitless animation possibilities.

Here’s how to do it.

Duplicate Section

To start, let’s duplicate the section we just created to give us a jump on the next design. To make it easier, toggle the wireframe view mode. Then click the duplicate icon on the section. In the new duplicate section, make sure to delete the duplicate code module since we won’t need custom CSS for this one.

Divi Gradient Background Animation

Update Row Settings

Once the section has been duplicated and the extra code module deleted, open the row settings change the background gradient type:

  • Gradient Type: Radial

Divi Gradient Background Animation

Then jump over to the advanced tab and delete the CSS Class. We don’t need it.

Divi Gradient Background Animation

Then update the visibility options as follows:

  • Horizontal Overflow: Hidden
  • Vertical Overflow: Hidden

Divi Gradient Background Animation

This is necessary because we will be positioning and animating divider modules outside of the row and we don’t want them to be visible there.

Add First Divider Module

We are ready to add our first of three divider modules which will contain a gradient background. Once the module has been sized and give a gradient background, we will position and animate the entire module.

Go ahead and add a Divider Module to the row.

Divi Gradient Background Animation

First Divider Module Settings

Divider Gradient Background

Update the Divider Module content as follows:

  • Show Divider: NO
  • Gradient Background Left Color: rgba(222,77,255,0.8)
  • Gradient Type: Radial
  • End Position: 70%

Divi Gradient Background Animation

Divider Size
  • Width: 50vw
  • Height: 50vw

Divi Gradient Background Animation

Make sure to give the height and width the same value in order to keep the perfect circle of the radial gradient intact.

Position

Next, give the divider an absolute position. This will allow the module to be placed within the column/row without altering the spacing or design of the content you will want to display. Also, you will want to update the Z Index to make sure the module stay in the background and will not overlap (or hide) the actual content (in this case a call to action).

Update the following:

  • Position: Absolute
  • Z Index: -1

Divi Gradient Background Animation

Transform Scale and Translate

Before we add the animation to the module, we must first increase the size of our module using the transform scale option as follows:

  • Transform Scale (X and Y): 600%

Divi Gradient Background Animation

Then we need to position our module where we want the module to be when the animation ends. Since we want the animation to be seamless (without any abrupt glitches when the animation repeats), we need to make sure the module is positioned outside of the column/row/section.

Update the following:

  • Transform Translate (Y): 0px
  • Transform Translate (X): 100%

Divi Gradient Background Animation

Animation

Finally, let’s add our animation. We are going to add a slide animation that begins outside the window on the left and then slides across the section all the way beyond the right side of the window. Then it will repeat this in an infinite loop. To do this update the following:

  • Animation Style: Slide
  • Animation Direction: 5000ms
  • Animation Intensity: 85%
  • Animation Starting Opacity: 100%
  • Animation Speed Curve: Linear
  • Animation Repeat: Loop

Divi Gradient Background Animation

Result

Let’s check out the result so far.

Divi Gradient Background Animation

Add Second Divider Module

To add the second Divider Module, deploy the wireframe view mode and duplicate the divider module to create a new one.

Second Divider Module Settings

Gradient Color

Then update the gradient color as follows:

  • Gradient Background Left Color: rgba(124,218,36,0.8)

Divi Gradient Background Animation

Transform Translate

After that, update the landing position of the module with the following transform translate value:

Transform Translate (X): -60%

Divi Gradient Background Animation

Animation

For this module, we are going to add a slide animate to left instead of to the right like before. Update the following animation settings:

  • Animation Style: Slide
  • Animation Direction: Left
  • Animation Intensity: 100%

Divi Gradient Background Animation

Add Third Divider Module

To create the third divider module, duplicate the second divider module and update the following:

  • Gradient Background Left Color: rgba(224,43,32,0.8)

Divi Gradient Background Animation

  • Transform Translate (Y): -100%
  • Transform Translate (X): 0%

Divi Gradient Background Animation

  • Animation Direction: Up
  • Animation Intensity: 82%

Divi Gradient Background Animation

Result

Check out the result!

Divi Gradient Background Animation

And you don’t have to stop there. You can use different animation styles, gradient color combinations to create something completely unique. You can even add more modules!

Final Thoughts

In this article, we showed you two ways to add gradient background animation in Divi. The first way uses a custom CSS snippet that works with your built-in Divi background gradient styling and creates a nice and clean animation effect. The second way takes advantage of Divi’s built-in options to animate entire modules in the background. Hopefully, this will give you the tools you need to get creative and add beautiful gradient backgrounds to your next project.

Which way do you like better?

I look forward to hearing from you in the comments.

Cheers!

Premade Layouts

Check Out These Related Posts

14 Comments

  1. Very cool but looks like a lot of work. Good thing you can save the section to the library
    🙂

  2. Hello…
    I’ve noticed on a few tutorials including this one you add the css to the code module. Is there an advantage to adding it here on the page vs. adding it to the additional css window?
    Cheers

    • Shane,

      We add the CSS to the code module in the tutorial is so that you can easily export and import the layout with the code. You can also add it to the page settings if you like.

  3. I like the second one. WOW. Very nice and smooth. And like Luis said you can save it to the library.

    Thanks.

  4. its simply amazing and easy to work.
    these effects actually make your graphic more attractive and creative

  5. I found that this nice effect does not work when you have the “Use Parallax Effect” enabled, but a nice touch all the same.

  6. Best animated theme for background with various features, thanks for sharing this informative blog.

  7. Well, I am finding it very difficult, but thanks for making it easier. I liked your way, thanks for sharing with us.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today

Pin It on Pinterest