Add a bit of extra movement into your Divi website like on the homepage of Divi Theme Examples with CSS gradient animations. The technique was created using the gradient animator site with a few edits of the code to make it work how I needed.

1 – First you will need to  add the CSS class animate-area to the section you want the background to appear on.

2 – Then add the following cod into your Divi Theme options custom CSS panel (it was not working for me in my child theme CSS file but you can try) You can edit the colours by editing background: linear-gradient(180deg, #253b46, #0f5f68, #3a134a); If you add more than 3 colours you will also need to adjust the background-size: 600% 600%; where each colour is represented by an extra 200%

/*———————————–
styles for animated background test
————————————-*/

@-webkit-keyframes animatedBack {
0%{background-position:50% 0%}
50%{background-position:50% 100%}
100%{background-position:50% 0%}
}
@-moz-keyframes animatedBack {
0%{background-position:50% 0%}
50%{background-position:50% 100%}
100%{background-position:50% 0%}
}
@keyframes animatedBack {
0%{background-position:50% 0%}
50%{background-position:50% 100%}
100%{background-position:50% 0%}
}
.animate-area {
background: linear-gradient(180deg, #253b46, #0f5f68, #3a134a);
background-size: 600% 600%;
-webkit-animation: animatedBack 5s ease infinite;
-moz-animation: animatedBack 5s ease infinite;
animation: animatedBack 5s ease infinite;
}

Elegant Themes' Black Friday/Cyber Monday sale is still on if you want 25% discount! Dismiss

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close