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 🙂

 

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. seo

    Hello Web Admin, I noticed that your On-Page SEO is is missing a few factors, for one you do not use all three H tags in your post, also I notice that you are not using bold or italics properly in your SEO optimization. On-Page SEO means more now than ever since the new Google update: Panda. No longer are backlinks and simply pinging or sending out a RSS feed the key to getting Google PageRank or Alexa Rankings, You now NEED On-Page SEO. So what is good On-Page SEO?First your keyword must appear in the title.Then it must appear in the URL.You have to optimize your keyword and make sure that it has a nice keyword density of 3-5% in your article with relevant LSI (Latent Semantic Indexing). Then you should spread all H1,H2,H3 tags in your article.Your Keyword should appear in your first paragraph and in the last sentence of the page. You should have relevant usage of Bold and italics of your keyword.There should be one internal link to a page on your blog and you should have one image with an alt tag that has your keyword….wait there’s even more Now what if i told you there was a simple WordPress plugin that does all the On-Page SEO, and automatically for you? That’s right AUTOMATICALLY, just watch this 4minute video for more information at. Seo Plugin

    Reply
  9. 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
  10. 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
  11. 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

Submit a Comment

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

Pin It on Pinterest

Shares