How to create gradient background animation on Divi

By Rebecca
5 Min Read

Gradient background animation can be a beautiful design technique for bringing 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 magnify 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 Divi’s built-in settings. The configuration is quite simple for such a beautiful result.

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 Parameters

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 infill as follows:

  • Padding: 0px high, 0px low

Row and Column Settings

Column settings

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

  • Padding: top 12vw

Then add the following custom CSS to the main column element:

  • height: 40vw;

Line parameters

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 row settings 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


Then update the row 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 is added to the line, add a code module to the line.

Paste CSS into 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 as we are adding it to the HTML code for the page.

Add a call to action

To complete the design, let’s add a call-to-action module to be part of the content.

Read more: How to add a drop-down contact form to your global header

Call to action settings


Update the content as follows:

  • Add a title
  • Add button text
  • Add body text
  • Button link URL: #
  • Use background-color: NO


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: Condensed Roboto
  • Button font weight: bold

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.


For website maintenance service contact us.

By Rebecca
Rebecca is an Independent content writer for breldigital, She writes content on any given topic. She loves to write a case study article or reviews on a brand, Be it any topic, she nails it