Linear, radial, conic and mesh ramps you can paste into a hero.
Most bad gradients are two saturated colours interpolated through the grey in the middle of sRGB. The fix is either a third stop that keeps the path out of the mud, or interpolation in a perceptual space — `in oklch` — which modern browsers support directly. Both approaches are in here, and the mesh variants are stacked radials rather than an image.
A four-color gradient that slowly pans its position to create a continuously morphing backdrop.
A multi-point radial gradient mesh that gently shifts position, producing a soft aurora of color.
Two large blurred radial blobs drift independently across a near-black canvas, evoking northern lights.
A saturated conic wheel of seven colors that rotates continuously — striking as a hero panel backdrop.
Three drifting curtains of light with the vertical striation a real aurora has — the one background a blurred CSS gradient can never be mistaken for.
Full-bleed animated ocean gradient that flows diagonally on a loop.
Rotating ocean conic gradient that swirls around the center.
Slow-drifting ocean light pools under a grain layer — the current default for dark hero sections.
Three heavily blurred blobs drifting on unequal periods, so the field never visibly loops back to where it started.
Blurred vertical ribbons of green and violet light that stretch and settle out of phase, like an aurora curtain over a dark horizon.
Slate background with two soft blue radial glows in opposite corners.
A wide ocean beam sweeping down from above the fold, softened with grain.
Three heavily blurred ocean orbs drifting behind the content — a mesh gradient you can actually animate.
Two parallax star layers over an ocean horizon glow, drifting at different speeds.
Repeating conic wedges anchored below the frame so only the upper fan is visible, turning slowly under a radial haze that keeps the hub from reading as a hard point.
Four-tone conic gradient tiles into a low-poly triangle mosaic in fuchsia and magenta.
Two sets of concentric sky-blue rings overlap like raindrops on water, brightening on hover.
Amber sunburst rays from a repeating conic gradient rotate slowly around a glowing centre disc.
A retro-tech glowing grid that pans diagonally over a radial vignette — Tron meets synthwave.
A repeating pattern of multi-color stars on a deep navy gradient that gently twinkles in opacity.
Tight diagonal ocean stripe pattern via repeating-linear-gradient.
Tight vertical ocean stripe pattern via repeating-linear-gradient.
Blueprint grid with blue minor and major rules — four gradients, no images.
The hero grid pattern: a blue rule grid dissolved at the edges by a radial mask so it never fights the content.
Showing 24 of 41. Search the rest →
Gradients, waves, particles and meshes that move without JavaScript.
Clipped fills, animated ramps and shine sweeps on headings.
Grids, dots, stripes and checkerboards from gradients alone.
Reveals, shimmers, glitches and per-letter staggers.
What happens under the cursor, across inputs, links and tiles.
Lifts, tilts, spotlights and border reveals on a card surface.