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

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

So, what do you think? Does that give you any ideas? Let's find out how to do it....


Advertisement: This article contains affiliate links that you will easily recognize. Classic links are in purple and sponsored links are in pink.


How do I get a background that changes color in Divi?

The following method can be easily integrated into Divi but can also be used in any WordPress theme or HTML page.

First of all, you must add a page and activate the Divi Builder (or edit a page that already uses the Divi Builder).

You will add a STANDARD SECTION (blue box in the image below).

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

section standard Divi


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


opacité ligne Divi

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

Ajouter une classe CSS à la section standard de Divi


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

/* couleurs changeantes */

.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 all! That's all! If you refresh your page you should see a background that changes color.

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


Some explanations about this CSS code....

To better understand and appropriate this piece of code, here are some explanations that will allow you to modify it as you wish:

explication du code CSS pour un arrière-plan qui change de couleur

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


What can be done with this code?

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

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

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

appel css

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

arrière-plan qui change de couleur dans Divi


Pin It on Pinterest

Share This