Aurora Background Generator
Soft, drifting glows of colour behind your hero or section — pure CSS on one element, no images, no JavaScript on your site.
Your next launch
An aurora background sits behind any content.
Get startedHow the aurora works
The glows are a few radial gradients on a ::before layer behind your content, softened with filter: blur() and drifted with a slow transform animation. Moving a layer with transform is one of the cheapest things a browser can animate, so it stays smooth without draining a laptop battery. The layer sits behind the content with isolation: isolate, so it never covers your text or buttons, and no extra markup is needed.
Visitors who have asked their device for less motion get the same aurora, standing still — the CSS includes a prefers-reduced-motion rule.
Getting a good one
Bands look like a real aurora: long ribbons across the top, leaving calm space lower down for text. Orbs fill the frame with soft balls of colour. Two or three colours that sit near each other on the wheel — teal, blue and violet, or pink, orange and gold — blend into one glow; colours from opposite sides meet in grey, so keep those apart with Spread. On a light base, lower the Glow so the colours stay pastel and text stays readable.
Need colours? Start from colour combinations, or press From the library. For a still version, try the Mesh Gradient Generator.