A background that changes color in Divi

In this article we will see how to easily get a background that changes color, simply with CSS code. Here, no Javascript or hands in code Hey! You will see that with this trick you will get a colorful effect super fun !

To better understand, discover this video that shows the final result of this background changing color :

So what do you say? Give you some ideas? Let's find out how to...

Need to master Divi? Discover my training that accompanies you step by step in the understanding and use of Divi! Learn more about Divi training.

1 – How to get a background that changes color in Divi?

The method that will follow can easily integrate into Divi but can also be used in any WordPress theme or HTML page.

First, you need to add a page and activate the Divi Builder (or edit a page that already uses the Divi Builder).

You will add a SECTION STANDARD (blue picture box below).

In the LINE (green box of the image below), add a TEXT MODULE (pink box of the image below). You can write the text of your choice, for my example, I wrote "just fun".

Then make sure to define the background of the LINE (green colour) with 100% transparency. This will allow the background color of the SECTION STANDARD.

Finally, edit the SECTION STANDARDGo to the tab ADVANCED and add a CSS class. For this example, I used the class fun-color.

Now you can save your page (your changes) and go to the tab Appearance > Customize > Additional CSS to enter these few lines of code:

/* changing colors */ .fun-color { -webkit-animation: random 15s infinite; animation: random 15s infinite; } @keyframes random { 15% { background-color: #e3ff87; * 30% { background-color: #ff7c96; } 45% { background-color: #6ffffa; ■ 60% { background-color: #ef6b30; } 75% { background-color: #bf69b1; } }

That's it! If you update your page you should see a background changing color.

Need more resources on Divi? Visit ElegantTheme's blog full of ideas and tutos!

2 - Some explanations about this CSS code...

To better understand and appropriate this piece of codeHere are some explanations that will allow you to modify it as you please:

1. The text between /* and */ is a CSS comment. This is not taken into account by the browser and allows you to find yourself in your code when you edit later. This is optional and you can change the text without problems.
2. The .fun-color is the CSS class call. The CSS code following this call will only be applied to HTML elements using this class
3. 15s is the duration of color change. If you increase, the color change will be slower, if you reduce it, it will be faster.
4. The percentages % must be adjusted according to the number of colors you want to use. If you reduce the number of colors, you will increase the % of each colour. If you increase the color number, you will reduce the % of each colour.
5. #e3ff87 is the code hexadecimal a color in HTML. To choose your own colors and know their code: visit this page.

3 – What can we do with this custom code?

The CSS code applies to an element. For my example, I used a CLASS (.fun-color) that I applied to a section of Divi but you could very well apply this code to an existing HTML class or ID in Divi.

For example, in the video below, I applied this code to menu of my Divi website :

For this, it's very simple, I used menu ID (#main-header) as you can see in the screenshot below:

Did you know that? You can test Divi for free by visiting on this page and by clicking on "TRY IT FOR FREE"

4 - To go further with the colors of Divi

I'm sure it gives you incredible ideas for your current or future projects... Am I wrong?

Otherwise, here is a playlist that you might like:

• Examples of colorful sites made with Divi
• Harmonize the colors of your WooCommerce store
• How to apply a different background color on each page?
• How to define different colors according to the authors of the publication?