Animated Gradient Background Class
Adds a "wpide-animated-gradient" class that gives any Group or Cover block a slowly shifting multi-color gradient background, for eye-catching hero and CTA sections.
Opens WPIDE on
Code
.wpide-animated-gradient {
background: linear-gradient(120deg, #6366f1, #ec4899, #f59e0b, #10b981);
background-size: 300% 300%;
animation: wpide-gradient-shift 18s ease infinite;
}
@keyframes wpide-gradient-shift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@media (prefers-reduced-motion: reduce) {
.wpide-animated-gradient {
animation: none;
}
}Notes
Change the four colors in the gradient. The movement stops for visitors who prefer reduced motion.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.