Gradient background animation can be a great design technique to bring background colors to life on your Website. It's a perfect solution for those who want something more realistic than a static background color without having to resort to a 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 smooth moving color transitions.
In this tutorial, we will show you how to create gradient background animations on Divi. This method combines a custom CSS snippet that animates the gradient colors chosen in the integrated Divi settings. The configuration is actually quite simple for such a beautiful result.
Let's start!
Posisble result
Here is an overview of the two ways we can create a gradient background animation on Divi.
Of course, the prerequisite for this tutorial is that you have a Divi theme installed and up to date.
Creation of a gradient background animation with the CSS extract and the background option of Divi
To start, add a row of one column to the default section in Divi Builder.
Section settings
Then update the section settings with a background image. Our gradient background will be added to our line so that it overlaps this image.
Then update the filling as follows:
- Padding: 0px high, 0px low
Row and column settings
Column parameters
Open the row settings, then update the column fill as follows:
- Padding: above 12vw
Then add the following custom CSS to the main column element:
height: 40vw;
Line settings
Gradient background
Now we can add the gradient background to the line. Make sure to make the gradient colors semi-transparent if you want to see the background image of the section.
Update the line parameters as follows:
- Left gradient background color: rgba (12,113,195,0.8)
- Gradient background color on the right: rgba (131,0,233,0.8)
- Gradient type: linear
- Gradient direction: 45 degrees
Select
Then update the line size as follows:
- Width: 100%
- Max width: 100%
Custom CSS class
Now that our gradient background is in place, we need to add the animation via custom CSS. Before adding the CSS code, we need to add a custom CSS class to target that specific row.
Go to the advanced tab and add the following CSS class:
- CSS class: animate-gradient
Add a code module
Once the CSS class has been added to the line, add a code module to the line.
Paste CSS in the code module
Then paste the following CSS code in the Code Code Settings Module area:
.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 because we add it to the HTML code of the page.
Result
Here is the result so far. The gradient background has been enlarged to 400% of the original size and is animated by moving left and right.
Add a call to action
To finish the design, let's add a call to action module to be part of the contents.
Call to action settings
Contents
Update the contents as following:
- Add a title
- Add button text
- Add body text
- URL of the link of the button: #
- Use background color: NO
Design
Go to the Design tab and update the following:
- Title font: Kaushan Script
- Title text size: 4vw (desktop), 30px (phone)
- Title line height: 1,4 em
- Body Police: Roboto
- Button text size: 16px
- Button text color: # 555555
- Button background: #ffffff
- Button border width: 0px
- Button border radius: 30 pixels
- Button letter spacing: 3px
- Button font: Roboto condensed
- Button font weight: bold
Result
Now check the result on the live page with the contents of the call to action in place. This would be a great header for your Website !
Remember, you can easily change the background colors of your line to whatever you want. The code will continue to run in the background to animate the background for you.
If you know a bit of CSS, you can adjust the speed and direction of the animation by changing the values of the animation properties.
I hope you found this tutorial useful. Do not hesitate to share your opinions on it.
