CSS Animated Gradient & Aurora Backgrounds

40 animated gradient backgrounds in CSS: aurora lights, mesh gradients, drifting orbs, lava lamp blobs and slow moving gradients for heroes and cards.

Animated Gradient Background

The classic moving gradient: four colors on a 400% canvas that pans back and forth. Only background-position animates, and every color is derived from your accent.

gradient · playful

Aurora Background

Soft ribbons of accent-tinted light sway, stretch and tilt across the top of a pale page and mix where they cross. A light-mode aurora for SaaS heroes: three blurred bands that only transform.

aurora · gradient · light

Mesh Gradient Background

Four pastel color points drift on looping paths and blend into a soft mesh. One registered @property angle drives every point through sin() and cos(), so the loop is exact.

mesh · gradient · light

Gradient Blobs Background

Three organic blobs with gradient fills morph their outlines and drift, darkening where they overlap like ink on paper. The shapes come from animated eight-value border-radius.

gradient · playful · light

Blurred Orbs Background

Three soft glowing orbs circle slowly over a near-black base and brighten where they cross. Each orb rides a rotating wrapper, so only transform animates, and the glow is a radial gradient.

gradient · dark · subtle · tailwind

Lava Lamp Background

Warm wax blobs rise from a pool at the bottom, stretch, merge into the pool at the top and sink back. The goo is the blur and contrast trick in em, so it scales with --bgx-size.

gradient · playful · dark

Holographic Background

A silvery foil with pastel rainbow bands and fine diagonal streaks sliding against each other, plus a glare that sweeps across. Blend modes do the iridescence, not images.

gradient · light · playful

Rotating Conic Gradient Background

A wide conic gradient of four accent hues turns slowly behind a soft dark vignette, like colored light swinging round a stage. The layer only rotates, which is cheap on any size.

gradient · dark · tailwind

Northern Lights Background

Green aurora curtains with violet tops sway above a mountain ridge on a night sky, their rays drifting sideways. Curtains only skew and slide, and the ridges are clip-path polygons.

aurora · dark · gradient

Sunset Sky Background

A full day in twenty seconds: the sun arcs over dark hills, the sky warms into sunset and fades to night as the moon rises. One rotating arm carries both, and the skies crossfade.

gradient · playful

Skewed Gradient Hero Background

A band of flowing color cut on a diagonal across the top of a light page, the angled hero look payment and SaaS sites use. Three gradient tiles slide at different speeds inside it.

gradient · light · mesh

Grainy Gradient Background

Two warm color clouds drift over a deep gradient under a fixed layer of film grain. The grain is an inline SVG feTurbulence filter blended with overlay, so it never needs an image file.

gradient · noise · dark

Spotlight Background

Two soft cones of light hang from the top of a dark stage and sweep back and forth, crossing in the middle. Each beam is a conic gradient faded with a mask, rotating from its lamp.

dark · gradient · subtle

Underwater Background

Deep water that darkens toward the bottom, with slanted shafts of light swaying down from a shimmering surface. The caustics are two ring tiles drifting in opposite directions.

gradient · dark · subtle

Breathing Glow Background

A soft glow in the middle of a dark surface slowly swells and fades on a six second breath, with a wider halo lagging just behind. Calm behind a hero, a player or an AI chat.

dark · subtle · gradient

Color Changing Background

The plainest version of the effect: the whole background eases from your accent through three sibling hues and back. One background-color keyframe, plus a soft top light for depth.

gradient · playful

Rainbow Background

A full spectrum gradient whose hues roll continuously, the RGB look from gaming setups. A registered @property number turns every stop round the color wheel, so nothing slides.

gradient · playful

Ambient Glow Background

The dark product hero look: two soft accent glows bleed in from opposite corners and slowly breathe, under a hairline of light along the top edge. Quiet enough to sit behind copy.

dark · subtle · gradient · tailwind

Fire Glow Background

Soft flames lick up from the bottom edge and flicker at different speeds over a breathing heat glow, with your accent as the hot base color. Each flame is a blurred teardrop that only transforms.

dark · gradient · playful

Morphing Gradient Background

A three color gradient that turns its angle and changes its colors at the same time, easing between three palettes. The angle and colors are registered with @property, so they really interpolate.

gradient · playful

Neon Glow Background

Two neon tubes wash a dark wall in magenta and cyan, flicker now and then, and ripple in the wet floor below. Each reflection shares its tube's flicker animation, so the pair stays in sync.

dark · gradient · playful

Silk Background

Deep satin in your accent hangs in soft folds that ripple sideways as if a breeze moved it. An inline SVG displacement filter bends a sliding tile of light and shadow bands.

dark · subtle · gradient

Watercolor Bloom Background

Pigment blooms spread across warm paper one after another, each with the darker rim of real watercolor, mixing where they overlap and fading away. The ragged edges come from an inline SVG filter.

light · playful · gradient

Edge Glow Background

A band of shifting color glows along all four edges of a dark frame, flowing around it like an AI assistant listening. A spinning conic gradient seen through a static edge mask.

gradient · dark · playful · tailwind

Plasma Background

The old demoscene plasma: two fields of smooth color rings drift past each other and a difference blend turns their overlap into flowing cells of color. Pure gradients, only transforms move.

gradient · playful · dark

Subtle Gradient Sweep Background

A near-white page with a faint accent wash at the top and a wide, soft band of tinted light that glides across every nine seconds, then rests. Made to sit behind dark text on a light hero.

light · subtle · gradient

Gradient Orb Background

A glossy sphere of swirling color floats in the dark with a halo that shifts hue as it turns, the look of an AI voice assistant. Two conic gradients spin in opposite directions under a glass shine.

gradient · dark · playful · tailwind

Lens Flare Background

A bright light in the corner throws a horizontal streak and a line of colored ghosts across the frame, and they swing through the center as the light drifts, like a camera panning past the sun.

dark · gradient · subtle

Prism Rainbow Background

A thin white beam hits a glass prism and fans out into a rainbow that sways and shimmers across the dark. The spectrum is one conic gradient wedge, faded toward the edge with a mask.

dark · gradient · playful

Lightning Storm Background

Heavy clouds roll over a dark sky until a forked bolt strikes and the whole scene flashes twice. The bolts are clip-path polygons, the flash is one overlay animating opacity.

dark · gradient

Nebula Background

Clouds of glowing gas in two hues swirl slowly behind dark dust lanes and a field of stars, with a few bright stars flaring. Two cloud layers turn in opposite directions and blend with screen.

space · dark · gradient

Aurora Curtain Background

A folding curtain of aurora light ripples across a starry night, its bright green hem waving under a violet glow. Forty overlapping slices heave on staggered delays under one blur, so folds travel.

aurora · dark · gradient

Dark Aurora Mesh Background

Long blurred bands of teal, accent and violet light drift and stretch over a near-black hero under a faint dot grid, the dark aurora mesh look. Bands are radial gradients that only transform.

aurora · mesh · dark

Light Aurora Glow Background

A soft pastel aurora rises behind the top edge of a white page, its colors slowly circling the rim like light through frosted glass. A blurred conic gradient turns on a registered @property angle.

aurora · light · subtle

Floating Gradient Orbs Background

Soft iridescent orbs float at different depths over a pale backdrop, their colors slowly swirling inside a frosted rim. Each orb clips a blurred, turning conic gradient, and far ones sit out of focus.

gradient · light · subtle

Twilight Shooting Stars Background

A twilight sky fades from deep navy to a warm glow over a dark hill while stars twinkle and the odd shooting star streaks past. Each meteor is a gradient line with a glowing head, mostly at rest.

space · dark · gradient

Gooey Gradient Lava Background

Pastel wax blobs pinch off a glowing pool, drift up, stretch and sink back like a real lava lamp, lit from within. CSS blur on each shaded blob, then an inline SVG alpha threshold makes the goo.

gradient · light · playful

Liquid Wallpaper Background

Rich color pools slowly fold into each other like a modern desktop wallpaper, with a soft highlight gliding through. Three blurred conic gradients turn at different speeds around off-center points.

gradient · mesh

Paper Grain Gradient Background

Soft pastel color clouds drift across warm paper while a fine grain shimmers on top, the printed gradient look of modern brand sites. SVG turbulence grain multiplies over blurred radial clouds.

noise · gradient · light

Glowing Wave Layers Background

Translucent waves stack along the bottom of a dark hero, each topped with a bright glowing crest line, drifting in opposite directions. Fill and crest are SVG wave tiles used as masks.

waves · dark · gradient

How to use these gradient backgrounds

Each background is one element that fills its container. Give your hero or section position: relative, put the background element inside it as the first child, and lift your content above it with position: relative; z-index: 1. For a full-page background, use position: fixed on the layer instead.

To change the accent color, set --bgx-color. To change the scale of the pattern (stars, grid cells, blobs, waves), set --bgx-size: everything inside is in em. Keep text contrast in mind on busy backgrounds.

Every snippet ships with a prefers-reduced-motion rule that freezes the background for people who asked their OS for less motion. The layers animate transform, opacity and background-position, which stay smooth on large areas.