12 layers · 3 free

Animated backgrounds in CSS

Every background here moves with CSS @keyframes and transforms rather than WebGL or a canvas loop, so it costs little to run and keeps playing if the page's JavaScript is late. A few lines of script add the pointer response and the tuning bridge; remove them and the loop still runs.

Each file is between 3.5 and 5.2 KB and holds still under prefers-reduced-motion. Behind body text, start with Mesh Gradient or Stripes Wave; Glitch Stripes and Conic Swirl are for pages that are meant to be loud.

Mesh Gradient
FREE
N° 0204 · css gradient mesh
Four blurred colour blobs on slow orbits, one of them following the pointer: the soft launch-page mesh, built from radial gradients and keyframes.
Aurora Bands
PRO
N° 0254 · layered aurora curtains
Northern lights made of blurred, skewed CSS curtains over a starry sky; the pointer leans the bands sideways like wind.
Fog Layers
PRO
N° 0276 · parallax drifting fog banks
Banks of soft radial clouds drifting at three speeds, so the depth comes from parallax rather than heavy blur.
Stripes Wave
FREE
N° 0283 · row-staggered bending stripes
Rows of vertical stripes, each sliding a beat after the one above, so a wave rolls down the page. Quiet enough to sit under text.
Conic Swirl
PRO
N° 0267 · rotating conic gradient layers
Stacked conic gradients spinning against each other, blurred into a vortex whose centre follows the pointer.
Line Grid
PRO
N° 0201 · parallax lines
Three line grids at different depths, each drifting at its own speed; tilt them into a floor for a horizon.
Drifting Shapes
PRO
N° 0194 · geometric drift
Circles, squares, rings and triangles rising at three depths with the far layer blurred. A light, playful default.
Checker Fade
PRO
N° 0266 · checkerboard with staggered fades
A checkerboard whose squares fade on staggered delays so diagonal waves roll across; the pointer lights a trail of cells.
Scanline Sweep
FREE
N° 0280 · radar sweep lines over a grid
A radar line sweeping down and another across a faint engineering grid, for dashboards, status pages and technical products.
Shutter Blinds
PRO
N° 0282 · tilting louvre slats
Venetian slats built with 3D transforms that tilt open in a slow ripple and let a warm light through.
Gyro Rings
PRO
N° 0257 · 3D rotating ring gyroscope
Nested rings turning on their own axes with preserve-3d: an object that reads as 3D with no WebGL at all.
Glitch Stripes
PRO
N° 0197 · clip-path glitch slices
Horizontal slices that jump sideways trailed by red and cyan ghosts; a fast pointer move sets off a burst.