Animated gradient generator
Make a gradient background that flows, rotates or sways. The code uses keyframes or @property and switches itself off for visitors who prefer reduced motion.
.animated-gradient {
background: linear-gradient(120deg, #ff2d87, #ffb800, #3ea8ff, #8b5cf6);
background-size: 400% 400%;
animation: gradient-flow 12s ease-in-out infinite;
}
@keyframes gradient-flow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
.animated-gradient { animation: none; }
}Keyframes vs @property
Flow moves an oversized gradient behind the element — the widest browser support and the effect most sites use. Rotate and Sway animate a value inside the gradient. That only works when the browser knows the custom property is an angle, which is what @property declares. Without it, a custom property is just text and jumps from start to end.
Questions
How do I animate a CSS gradient?
The classic way is to make the gradient larger than the element (background-size: 400% 400%) and animate background-position with @keyframes. The modern way registers a custom property with @property so the browser can interpolate an angle or colour inside the gradient itself.
Is an animated gradient bad for performance?
Animating background-position triggers repaints, which is fine for one hero section but costly for many elements. Keep durations long (10–20s), animate only visible elements, and always stop the animation for people who set prefers-reduced-motion.
What is @property and is it supported?
@property (CSS Houdini Properties and Values API) declares a typed custom property such as <angle> or <color>, which makes it animatable. It is supported in Chrome 85+, Safari 16.4+ and Firefox 128+.
Why respect prefers-reduced-motion?
Large moving backgrounds can trigger nausea or migraines for people with vestibular disorders. WCAG 2.2 criterion 2.3.3 recommends letting users disable non-essential motion; the generated code pauses the animation when the system setting asks for reduced motion.