How to create a color changing background

How to create a color changing background

During a recent conversation, a client of mine asked me how you can create a section with an animated ‘color changing’ background. I thought the solution to this request could be useful for other Divi users, so have put together this post outlining the steps.

In this tutorial, you’ll discover how to create an animated background color and how to customize it.

If you are curious to see the result of this tutorial then you can check out the preview here.

Creating a color-changing background

 

#1. Method

This is the easiest method, and makes use of the linear-gradient CSS property for the palette of colors and the angle, and an animation set to infinite to create a loop of colors.

custom background color class

Ok, now all you need to do is add the custom class ‘gradient_section’ to the section you want to apply the background to. Then you will need to copy and paste the following code in your child theme or options panel.

/*------------------ #1 Method -------------------*/
.gradient_section {
 background: linear-gradient(90deg, #18f0b8, #18a2f0, #db5640);
 background-size: 600% 600%;
 -webkit-animation: Colorand 60s ease infinite;
 -moz-animation: Colorand 60s ease infinite;
 animation: Colorand 60s ease infinite;
}
 @-webkit-keyframes Colorand {
 0%{background-position:0% 50%}
 50%{background-position:100% 50%}
 100%{background-position:0% 50%}
 }
 @-moz-keyframes Colorand {
 0%{background-position:0% 50%}
 50%{background-position:100% 50%}
 100%{background-position:0% 50%}
 }
 @keyframes Colorand { 
 0%{background-position:0% 50%}
 50%{background-position:100% 50%}
 100%{background-position:0% 50%}
 }

Customize the background

To customize the background, just add the color code you want in the section Color Palette (see image), you can also customize the angle of the colors, and how much time elapses between each color change.

In this example, alternate only 3 colors, but you can also add others.

color pallette

 

#2. Method

The second method uses the :after pseudo class to add our custom background after the content. In our case we apply a background to the entire section.

Perhaps this method is a little bit complicated for beginners but it allows you to get a better result for a perfect color animation and a greater flexibility of use.

background animated

To use the second method, you need to add the section the ID background_animated and copy and paste the CSS code in your options panel or child theme, just like before.

/*------------------ #2 Method -------------------*/
#background_animated { 
 -webkit-box-sizing: initial;
 -moz-box-sizing: initial;
 box-sizing: initial; 
}
#background_animated .et_pb_row {
 z-index: 1; 
}
#background_animated:after{
content: "";
 position: absolute;
 top: 0; left: 0; bottom: 0; right: 0;
 -o-animation: colorandom 15s infinite; 
 -moz-animation: colorandom 15s infinite; 
 -webkit-animation: colorandom 15s infinite; 
 animation: colorandom 15s infinite; 
 filter: alpha(opacity=75);
 -moz-opacity: 0.75;
 -khtml-opacity: 0.75;
 opacity: 0.75;
}
@-o-keyframes colorandom { 
 0% {background: #3ba3ff;} 
 20% {background: #2e48b4;}
 40% {background: #ee6a68;} 
 60% {background: #92bdcf;} 
 80% {background: #ff973b;} 
 100% {background: #3ba3ff;} 
}
@-moz-keyframes colorandom { 
 0% {background: #3ba3ff;} 
 20% {background: #2e48b4;} 
 40% {background: #ee6a68;} 
 60% {background: #92bdcf;} 
 80% {background: #ff973b;} 
 100% {background: #3ba3ff;} 
}
@-webkit-keyframes colorandom { 
 0% {background: #3ba3ff;} 
 20% {background: #2e48b4;} 
 40% {background: #ee6a68;} 
 60% {background: #92bdcf;} 
 80% {background: #ff973b;} 
 100% {background: #3ba3ff;}
}
@keyframes colorandom { 
 0% {background: #3ba3ff;} 
 20% {background: #2e48b4;} 
 40% {background: #ee6a68;} 
 60% {background: #92bdcf;} 
 80% {background: #ff973b;} 
 100% {background: #3ba3ff;}
}

Customize the background

In this image I highlighted a part of code that allows you to customize the animation time and the background opacity.

animated css

Here you can see the five colors in the example shown, and I specified 5 colors and not 6 because if you look carefully the animation starts with the color #3BA3FF and ends with the same color to start a new loop.
animated keyframe

 

Conclusion:

 This is all. Now all you have to do is get creative! If you liked this tutorial or plan to use it, please leave a comment 🙂

 

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.