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

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: gradient, animation, background
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-animated-gradient-background/

## Code

```css
.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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Animated Gradient Background Class" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/