Aurora Background
The most copied background effect of the last three years, and the one that most often ships a janky page. The usual implementation animates filter: blur(80px) on three huge elements — which forces the browser to re-blur them every frame. This version gets the same look with pre-softened gradients and no filter at all.
Live demo
Content stays readable
The colour moves slowly enough that you notice the atmosphere, not the animation. Text sits above it with a scrim behind.
The prompt
Create an aurora background: three soft colour fields drifting slowly behind the page content. Structure: - A container with overflow: hidden and a dark base colour. Inside, exactly three empty span elements used purely as colour fields, plus the real content in a sibling element above them. - Each field is an absolutely positioned element with a radial-gradient background that fades to fully transparent by 70% of its radius. Do NOT use filter: blur() — a large-radius blur re-rasterises every frame and will drop frames on integrated GPUs. - Size each field around 400-450px and position them partly outside the container so only the soft edge is visible. Motion: - Animate transform (translate and scale) only, 14-18s per cycle, ease-in-out, alternate, with different durations and delays so the fields never sync up. - Keep total movement under about 100px. Larger travel reads as a lava lamp, not atmosphere. - Use mix-blend-mode: screen on the fields so overlapping colours combine. Readability: - Put a semi-transparent scrim or a subtle vertical gradient between the fields and the text. Never rely on the aurora itself for contrast. - Body text must hold at least 4.5:1 contrast against the darkest region the fields can move over. Constraints: - Respect prefers-reduced-motion: freeze the fields at their initial transform, keep the colour, drop the animation. - Expose a pause control if the background sits behind content a visitor reads for more than a few seconds.
What actually makes it work
- Radial gradients instead of blur. A
radial-gradientwith stops fading totransparentis already soft — the browser rasterises it once and then only moves a layer.filter: blur(80px)on a 400px element has to re-blur every frame, which is where the dropped frames come from. Same visual result, an order of magnitude cheaper. - Desynchronised durations. Three fields on the same 16s loop visibly pulse together, and the pattern becomes predictable. 16s / 19s / 22s with offset delays never repeats within a session.
mix-blend-mode: screen. Screen blending makes overlapping fields add up to brighter colour rather than one covering the other — that is what produces the aurora look rather than three floating discs.- Movement budget. Under ~100px of travel over 15 seconds is roughly 7px per second. Above that the eye tracks it as motion, which pulls attention off the content.
Compatibility and performance
| Aspect | Detail |
|---|---|
| radial-gradient | Universal. |
| mix-blend-mode | Universal in modern browsers; costs a compositing pass but no per-frame re-blur. |
| Cost | Three compositor layers. Transform-only animation means no layout and no paint after the first frame. |
One practical note: this demo keeps a fixed dark background on purpose. An aurora needs a controlled canvas — if you inherit whatever surface colour the page happens to use, the gradients either wash out on light themes or disappear on dark ones. Treat it as a self-contained section, not a page-wide background.
When not to use it
Don't put it behind body copy. A moving background under a paragraph measurably slows reading. Keep it behind a hero headline and a single line of supporting text.
Don't use it on a site that is already visually busy. Aurora plus glass cards plus a gradient headline is three competing atmospheres; the page reads as noise.
Don't add it to checkout or forms. Movement near an input field competes with the cursor and raises error rates.