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
  • Google+
  • Facebook
  • Twitter

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
  • Google+
  • Facebook
  • Twitter

 

#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
  • Google+
  • Facebook
  • Twitter

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
  • Google+
  • Facebook
  • Twitter

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
  • Google+
  • Facebook
  • Twitter

 

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 🙂

 

Previous post
Next post

14 Comments

  1. Bob Schecter

    Definitely complex, but there are CSS lessons in there that you won’t generally find. Thanks

    Reply
  2. Luciano

    Great tutorial, just to say this is an amazing background and thanks to share the
    knowledge!
    Tks from Brazil

    Reply
  3. Bettina

    Great job! Thanks a lot for this idea. Was just looking for some new inspiration and…got it 🙂

    Best from Germany, Bettina

    Reply
  4. Nata

    Hi! I love this idea, thanks! I would really like to use it, but I’m new to CSS and I’m having trouble finding out where exactly I need to paste the code :S… I tried adding it to the style.css sheet, at the bottom, but that doesn’t seem right. Any help would be much appreciated! Thanks in advance 🙂

    Reply
    • Nata

      Never mind, found the ‘Custom CSS’ panel 🙂 – thanks again for the idea and the tutorial, Fabio!

    • Wayne

      Hi, total newbie here, this looks like a great idea, I am trying to make it work on a full-width divi header. Where do I put the actual CSS? In the Before: Main Element: Or After: ?

      Any guidance would be greatly appreciated. Thanks 🙂

  5. Dani

    Thanks! Really easy to apply and good effect to create a subtle difference 😉

    Reply
  6. Rob Cosh

    No way. 🙂 6 hours ago I was daydreaming about a section of a website with colours automatically changing. I’ve never seen it before, and I promptly forgot about the idea. Then – I stumble on this. Jaw on floor. Thanks for this great tutorial!!!

    Reply
  7. Robert

    where i put the css code?

    Reply
  8. Tom

    Really great, thanks for sharing this. Just an additional question, is there also a similar way to have filters for images on a website, like a blur or greystyle effect etc.? Within a Divi theme?
    Thanks a lot in advance for short feedback.

    Cheers
    Tom

    Reply
  9. Xavier

    Hi!
    Really nice trick!

    I can apply the method 2 over and image but i can’t use the gradient one… 🙁

    Do you know how to use it? The gradient color over a fullscreen image/slider?

    Thanks in advance for your time!
    X

    Reply
  10. Jon Sharp

    Could you tell me how this effect could be applied to the full site background (using a boxed layout), rather than to a module or section?
    Please and thank you!!

    Reply
  11. Liz

    Well, I really appreciate this post however sadly I can’t get it to work on my Divi Site. Any updates to this post for the current Divi version would be awesome or a little more clarity as to where to add the CSS, I have tried the obvious as suggested in the post instructions ( Child theme Custom CSS) and also tried Theme options Custom CSS with no luck to either. I have also named the Section Class gradient_section.
    It would be good if Steven the post author would be kind enough to respond with clarification 🙂

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *