Animated gradient
Honors “reduce motion” automatically — the copied CSS parks the loop for anyone with that preference.
How an animated gradient actually works
Browsers cannot smoothly interpolate the colour stops inside a gradient, so you cannot simply transition
one gradient into another and expect movement. The technique every animated gradient background uses
instead is a sleight of hand: make the gradient far larger than the element — 300% is the usual figure —
and animate background-position so the oversized canvas slides underneath a fixed window.
Nothing about the gradient changes; you are panning across it, and the eye reads that as slow, liquid
colour drift. This generator writes that whole recipe for you, including the @keyframes block.
How to build yours
- Set two to five colour stops — or hit Harmonize to derive a set from the first colour.
- Pick the gradient type: linear for classic diagonal drift, conic for the aurora sweep, radial for a centred glow.
- Choose the motion — Drift pans your exact palette, Hue cycle rotates the whole thing through the colour wheel.
- Set the loop time. Slower is almost always better: 12 to 30 seconds reads as ambient, 3 seconds reads as a strobe.
- Copy CSS for the full rule plus keyframes plus the reduced-motion guard, or Copy HTML for a ready-made section.
Drift or hue cycle?
The two motions look similar for a second and then diverge completely. Drift moves your chosen colours past
one another, so the palette on screen is always the palette you picked — which is what you want when the
gradient carries brand colours. Hue cycle applies an animated hue-rotate filter, so the whole
composition travels around the colour wheel and spends most of the loop showing hues you never chose. That
is the right call for a playful rainbow effect and the wrong one for a brand surface, so the control is a
deliberate choice rather than a hidden default.
Performance and reduced motion
Animating background-position is cheaper than animating gradient stops, but it is still a
repaint on every frame rather than a GPU-composited transform, so it is not free. On one full-page
background it is generally fine; spread across many elements, or on a low-end phone, it can cost real
frames — keep the loop slow, animate one surface rather than several, and check it on an actual device.
Every snippet this tool exports also ships a prefers-reduced-motion guard that parks the
animation, so visitors who have asked their operating system for less motion get a still gradient instead
of a moving one. That guard is not optional here; it is part of the copied CSS every time.
Keeping text readable on top
A moving background is a moving contrast problem: text that passes a contrast check against one part of the loop can fail against another as the colours travel. If you are putting copy over one of these, either keep the stops close in luminance so the contrast barely changes across the cycle, or drop a semi-opaque panel behind the text. Our contrast checker will tell you where the pairing stands, and the glassmorphism generator builds exactly that kind of frosted panel to sit on top.
Frequently asked questions
How do you animate a CSS gradient background?
You cannot transition gradient colour stops directly in most browsers, so the standard trick is to make the gradient much larger than its box — say 300% — and animate background-position instead. The gradient itself never changes; you slide the oversized canvas around underneath, which reads as slow colour drift. That is exactly what the Drift motion here exports.
What is the difference between Drift and Hue cycle?
Drift animates background-position across an oversized gradient, so your chosen colours slowly move past each other — the palette stays exactly what you picked. Hue cycle animates a hue-rotate filter, so the whole gradient travels around the colour wheel and passes through hues you did not choose. Drift keeps a brand palette on-brand; hue cycle is the rainbow effect.
Can I use this with Tailwind?
Partly, and the tool is explicit about the limit. Tailwind utilities can express the gradient image and the oversized background size, and Copy Tailwind emits both. They cannot declare @keyframes — no utility creates a keyframe block — so the animation itself has to come from real CSS. The copied Tailwind output says so and points you at Copy CSS rather than emitting a class that references keyframes your project never defined.
Are animated gradients bad for performance?
Animating background-position is cheaper than animating the gradient stops, but it still repaints on every frame and is not GPU-composited the way transform and opacity are. On a full-page background that is usually fine; on many elements at once, or on low-end mobile, it can cost you. Keep loop times slow, use one animated surface rather than several, and check on a real phone.
Does it respect reduced motion?
Yes, and not optionally. Every animated snippet this tool exports ships a prefers-reduced-motion media query that sets animation: none, so a visitor whose operating system asks for less motion sees your gradient sitting still instead of looping. The live preview here honors the same preference.
Can I use conic and radial gradients too?
Yes — switch the Type control. Linear is the classic diagonal drift, conic sweeps around a centre point and is what most "aurora" backgrounds use, and radial glows outward from the middle. Angle drives the linear direction and the conic start angle; a radial gradient is centred, so it has no angle to set and the control hides itself.
Is anything I make uploaded anywhere?
No. The gradient is generated and animated entirely in your browser, the CSS is produced locally, and nothing is sent to a server. There is no account and no watermark, and the page keeps working offline once it has loaded.
Prefer a still mesh gradient? The grainy mesh generator → Want the animation on the headline instead? Gradient text →