Animated Gradient Generator

FAQ

What happens for people who prefer reduced motion?

Every code export includes a prefers-reduced-motion rule. People who ask their system for less motion see a calm, still gradient, exactly the first frame of the animation. The preview here behaves the same way.

Which browsers support the rotating and color-shifting gradients?

They use @property, which Chrome and Edge support since version 85, Safari since 16.4 and Firefox since 128. Older browsers show a still gradient instead of a broken background.

Does the animation slow down my page?

The blobs only move with transform, which the browser handles on the graphics card. Panning, rotating and shifting repaint the background, so keep them for one hero area rather than many small elements. Longer durations look calmer anyway.

How do I use it with Tailwind?

The Tailwind export gives you classes with arbitrary values plus a note to add the keyframes. For Tailwind v4 there is an @theme version that defines --animate-* and the keyframes, so you can write animate-gradient-pan.

Can I get the animation as an image?

PNG, JPG, WebP and SVG show the still start state. The GIF export draws the whole loop frame by frame, seamlessly, for places where CSS is not possible such as emails or chats.