Animated backgrounds

A four-color gradient that slowly pans its position to create a continuously morphing backdrop.

Three blurred colored orbs drifting on a dark surface — great for hero section backdrops.

A retro-tech glowing grid that pans diagonally over a radial vignette — Tron meets synthwave.

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 repeating pattern of multi-color stars on a deep navy gradient that gently twinkles in opacity.

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.

Four interfering sine waves coloured by their own interference. About fifteen instructions a pixel, which makes it the cheapest full-bleed background here.

Noise sampled at a position that is itself noise, twice, then cut into contours so the folds read as a polished surface rather than as fog.

Six inverse-square fields thresholded into one body, so blobs grow a neck as they merge. No amount of border-radius produces a neck.

A metaball field whose blobs grow spikes along the field lines, faded in toward the surface so the cores stay round. Almost entirely specular, like the real material.

Sixty-four particles that draw a line when they come within range and lean toward the pointer. The links are the effect, and they are why this cannot be a shader.

Full-bleed animated ocean gradient that flows diagonally on a loop.

Slate background with two soft blue radial glows in opposite corners.

Tight diagonal ocean stripe pattern via repeating-linear-gradient.

Tight vertical ocean stripe pattern via repeating-linear-gradient.

Rotating ocean conic gradient that swirls around the center.

The hero grid pattern: a blue rule grid dissolved at the edges by a radial mask so it never fights the content.

Slow-drifting ocean light pools under a grain layer — the current default for dark hero sections.

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.

Three heavily blurred blobs drifting on unequal periods, so the field never visibly loops back to where it started.