A background gradient animation enhances your website’s beauty and gives it a life.
For example, a soft and subtle gradient animation can create a calming and relaxing atmosphere. On the other hand, a bold and dynamic gradient can convey energy and excitement.
However, making these gradient background animations in Divi is initially a tough one. Luckily, we’re here to show you the two easiest ways to create an animated gradient background in Divi
So, let’s dive in.
Method #1: By Using CSS Snippet and Divi’s Background Option
We assume that you already have the Divi builder installed. Now, create a new WordPress page using the Divi Builder’s front end (visual builder) and choose the option “Build From Scratch” to continue.
Once done, you’ll have a blank space to start designing the animated gradient background in Divi. We will use the CSS code here to continue the process.
Here’s the step-by-step guide –
Add Section & Row
Clicking the ‘Build From Scratch’ in the previous option will take you to the Divi section by default. Then, you have to add a one-column row to the default section in the Divi Builder.
Adjust Section settings
Here in section settings, we have to update it with a background image. We are using a background image so that it can emerge the gradient color. If you want, you can skip it though.
After adding an image, here’s a small tweak to update the padding. Simply go to Design > Spacing > Padding and change to 0px for both top and bottom.
Changes on the Column settings
Now we have to make some changes in column settings –
- Open the row settings > Column settings > Design > Spacing and then update the top padding to 12vw
- Then to add the custom CSS, go to Advanced > custom CSS > Module Element > Main Element – height: 40vw;
Add Gradient Background
Now to add a gradient background, we have to make changes to the row settings. But make sure the gradient colors remain semi-transparent, this helps you to see the background image of the section.
To add a gradient, go to row settings > Background > Background Gradient > and update the settings as follows:
- Gradient Background Left Color: RGBA (0,131,175,0.71)
- Gradient Background Right Color: RGBA (131,0,232,0.71)
- Gradient Type: Linear
- Gradient Direction: 60deg
Note: You are free to choose any color settings you want. But make sure they remain semi-transparent, as mentioned.
Change the Row Size Settings
Here, to update the size of the row, go to row settings > Design > Sizing and make changes as follows –
- Width: 100%
- Max Width: 100%
Add Custom CSS Class
We have added the gradient background in a place. Now, we have to add animation via custom CSS. But before that, we need to add a custom CSS class to target this specific row.
Go over the Row Settings > Advanced > CSS ID & Classes > CSS Class > animate-gradient
Insert Divi Code Module
Once the CSS Class has been added to the row, adding the Divi code module is the next step.
Paste CSS in the Code Module
Now paste the following CSS code inside the Code Module Settings Code box:
<style>.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%; }}</style> |
Here’s how the initial animated gradient background will look –
However, you can easily change to any colors you like for your row background. The code will keep working to let the background colour change smoothly.
Add CTA Module (Or any module according to your design)
To complete the blank space, we have added a call to action module to stand in as some content. You can add any module according to your design.
Here is the final result of our first animated gradient background in Divi –
Method #2: By Using Divi Modules with Circular Gradient Backgrounds
Here’s another method for making a gradient background animation in Divi. You can animate one or more sections, each with a circular gradient background. This way, you have complete control over how each section moves without needing extra CSS code, and you can be more creative with animations.
Here’s how you can make it happen.
Duplicate Section
As we have moved on to our next method, duplicating the section can be a wise step. Simply click the upper left ‘Duplicate’ button to continue.
Update Existing Settings
Now in this method #2, we have to make some tweaks to its settings
- Delete the Divi Code module
- Delete the CSS Class from row settings (Row Settings > Advanced > CSS ID & Classes > CSS Class > animate-gradient)
Note: If you are starting this method individually, first add a section, row, and column. Then, you can follow the steps below (skipping steps 1 and 2 since they depend on the previous method #1)
- Update the background gradient type to Circular (row settings > Background > Background Gradient > Gradient Type > Circular)
- Update the visibility options to Hidden for both horizontal and vertical overflow (Row Settings > Advanced > Visibility)
Add First Divider Module
We will add our first of three divider modules containing a gradient background. Simply click the grey(+) icon and search for the Divider module to add it to the row.
First, we will size the module and give it a gradient background. Then, we will change the position and animate the entire module.
Add Divider Gradient Background
Adding the Divider module gives you a toggle; first, make this Show Divider button to NO. Then to add a Divider gradient background, go to the Content > Background and do the following –
- Add background gradient color; the left one color is ‘rgba(222,77,255,0.8)’
- Make the right one to ‘Transparent’ color and end its position to 70%
- Select the gradient type to ‘Circular’
Change the Divider Size
Go to Design > Sizing and do as following –
- Width: 50vw
- Height: 50vw
Note: Make sure to give the same height and width value to keep the perfect circle size.
Change the Divider Position
Next, we have to set the divider to be in a fixed position. This lets you put the module inside the column/row without changing the space or look of the content you want to show.
Also, updating the Z Index will keep the module behind and not cover up the main content (like a call to action).
Make the changes to Advanced > Position –
- Position: Absolute
- Z Index: -1
Make a Move on ‘Transform’
Before adding the animation, we must increase the size of our module using the transform scale option. Simply go to Design > Transform and do as follows:
- Transform Scale (X and Y): 600%
Then, we need to position our module where it will be there when the animation ends. That’s why we update the –
- Transform Translate (Y): 0px
- Transform Translate (X): 100%
Add Animation
Now we are on to add an animation. We’ll create an animation that starts outside the window on the left, and then moves across the section until it reaches the right side of the window.
To make this, go to the Design > Animation and update with these –
- Animation Style: Slide
- Animation Direction: Right
- Animation Duration: 5000ms
- Animation Intensity: 85%
- Animation Starting Opacity: 100%
- Animation Speed Curve: Linear
- Animation Repeat: Loop
Note: Feel free to adjust the animation values according to your design needs.
Add Second Divider Module
To add the second Divider Module, go to Layers (right bottom) and simply duplicate the divider module to create a new one.
Now click the new Divider module settings button to enter its customization. Here you have to update a few things –
- Content > Background > Gradient Background Left Color: rgba(124,218,36,0.8)
- Then, update the Transform Translate (X): -60% via Design > Transform
- Next, go to the Animation and only change the Animation Direction to Left
Here’s the output of using the second Divider module –
Add Third Divider Module
Adding the third Divider module is a similar process to adding the second one. Simply duplicate the second divider module and update a few things –
- Change gradient Background Left Color to RGBA (255,0,34,0.8)
- Then for the Transform Translate (Y): -100% and Transform Translate (X): 0%
- Changes on Animation that Animation Direction: Up, Animation Intensity: 82%, and Animation Duration: 2000ms
Here’s the final look –
Final Thoughts
In this article, we explained two ways to add gradient background animation in Divi. One way is using a CSS snippet, and the other is with Divi’s Divider module, which is a code-free option. Both of them take advantage of Divi’s built-in options to create animated gradient backgrounds.
Hopefully, this guide will inspire you to be creative and help you add beautiful gradient backgrounds to your next project.
Feel free to share your gradient animated backgrounds in the comments below. If you need any further help, we’re here for you!
0 Comments