Animated gradient backgrounds with Divi

I love designing with gradient backgrounds. They add a refreshing touch to an otherwise stagnant page. I could even use vague client lingo and say that gradients make my site “pop!”. Cringe-worthy phrases aside, it’s incredibly easy to do this to your own site. Just follow along with these instructions…

1. While you could type the CSS yourself, there’s a wonderful generator that you can use at gradient-animator.com. Use the green “Add Colour +” button to add at least two colors. Leave this tab open, because you’ll copy and paste it into the CSS on your website. (Don’t know how to work with CSS? I’ll show you how in a few seconds.)

2. Create a new CSS class (you will type the code in red below, and you can name it whatever you’d like as long as it’s preceded by a period). Paste the top lines of code from Step 1 into this class:

.gradientBackground {
    background: linear-gradient(46deg, #ff0000, #0011ff);
    background-size: 400% 400%;
    -webkit-animation: YourAnimationName 30s ease infinite;
    -moz-animation: YourAnimationName 30s ease infinite;
    animation: YourAnimationName 30s ease infinite;
}

3. Below the closed bracket ( ) from the code in Step 2, paste the animation code at the bottom of the code generated in Step 1:

@-webkit-keyframes YourAnimationName {
    0%{background-position:14% 0%}
    50%{background-position:87% 100%}
    100%{background-position:14% 0%}
}
@-moz-keyframes YourAnimationName {
    0%{background-position:14% 0%}
    50%{background-position:87% 100%}
    100%{background-position:14% 0%}
}
@-o-keyframes YourAnimationName {
    0%{background-position:14% 0%}
    50%{background-position:87% 100%}
    100%{background-position:14% 0%}
}
@keyframes YourAnimationName { 
    0%{background-position:14% 0%}
    50%{background-position:87% 100%}
    100%{background-position:14% 0%}
}

4. Use the CSS class you created in Step 2 (the red text) on whereever you want to add the gradient. I recommend adding the class to the Custom CSS settings on the outermost module, like so (and remember, this is case-sensitive and should not be preceded by a period when you add it to the Divi module):

Adding a gradient background to a section

5. Update the page, and everything should be working. For reference, your final code will look like this (what you’ll type is highlighted in red):

.gradientBackground {
    background: linear-gradient(46deg, #ff0000, #0011ff);
    background-size: 400% 400%;
    -webkit-animation: YourAnimationName 30s ease infinite;
    -moz-animation: YourAnimationName 30s ease infinite;
    animation: YourAnimationName 30s ease infinite;
}
@-webkit-keyframes YourAnimationName {
    0%{background-position:14% 0%}
    50%{background-position:87% 100%}
    100%{background-position:14% 0%}
}
@-moz-keyframes YourAnimationName {
    0%{background-position:14% 0%}
    50%{background-position:87% 100%}
    100%{background-position:14% 0%}
}
@-o-keyframes YourAnimationName {
    0%{background-position:14% 0%}
    50%{background-position:87% 100%}
    100%{background-position:14% 0%}
}
@keyframes YourAnimationName { 
    0%{background-position:14% 0%}
    50%{background-position:87% 100%}
    100%{background-position:14% 0%}
}

Hello there, Divi designer!

Designing can be tough, but you can make it easier. Receive four free emails on eliminating stress, using Divi's magical powers to work smarter, raising your rates, and automating the administrative dullness in your practice so you can focus on doing what you love.

Learn More

Why is this popup so ugly?

Who knows. But you know what's not ugly? Getting tips from another Divi designer on having better clients, raising your rates, and getting more done while doing less work. Give us your email to get our five (completely free) emails! Freebies included.

Check your email for the first lesson! We're sure you'll love it.