Aurora Background — Free HTML CSS Snippet

The aurora background simulates the appearance of the Northern Lights — large, softly glowing colour fields that shift and blend against a near-black sky. Used on AI product landing pages, SaaS hero sections, and dark premium interfaces to create depth and motion without images or video — see also the gradient mesh hero, floating particles, and liquid blob backgrounds.

The four-property technique

Each orb (.orb) is an absolutely-positioned div with four properties working together: border-radius: 50% makes it circular. background: radial-gradient(circle, #colour, transparent 70%) makes it fade from solid at the centre to transparent at the edges. filter: blur(80px) softens the entire orb into a diffuse glow. mix-blend-mode: screen makes overlapping orbs additively blend — wherever two orb colours overlap, their brightnesses combine rather than occluding each other.

Why mix-blend-mode: screen creates the aurora

screen blending mode works like projecting coloured light onto a wall — two beams add brightness rather than subtracting. On a near-black background (#030712), the orbs' colours appear in full saturation. Where an indigo orb and a pink orb overlap, the result is a bright magenta. This additive blending is what gives the aurora its characteristic shifting colour mixing.

The drift animation

@keyframes drift animates translateX and translateY across three keyframes: 0% → 33% → 66% → 100%. Each orb has a different animation-duration (14s, 18s, 22s) and the last orb uses animation-direction: reverse, so all orbs move at different speeds and directions — creating the organic, non-repeating flow of real aurora.

The blurred container

All orbs sit inside .aurora { position: absolute; inset: 0; filter: blur(80px); opacity: 0.65 } — a second layer of blur softens the orbs further. The opacity: 0.65 prevents the aurora from overpowering content placed above it.

The mix-blend-mode: screen effect

Each aurora orb uses mix-blend-mode: screen. Screen blending adds pixel colour values together — where two orbs overlap, their colours combine additively, creating brighter, more saturated intersection zones. This is why overlapping a purple orb and a pink orb creates a bright white-pink centre. Without mix-blend-mode, the orbs would simply overlap with the top layer obscuring the bottom one.

The drift animation

Each orb uses a @keyframes drift animation that moves via translate(x,y) and scale(). Three orbs have different animation-duration values (14s, 18s, 22s) and animation-delay values (-6s, -12s). Because they move at different rates and phases, they never synchronise — the pattern is always unique and organic-looking. Using translate (not left/top) keeps the animation on the GPU compositor.

Colour temperature variation

The three default colours (indigo, pink, cyan) were chosen to represent warm, cool, and neutral tones that blend well in screen mode. For a warmer aurora, shift toward amber and red. For a cooler aurora, shift toward blue and teal. Avoid very dark or very light colours — screen blending works best with mid-range saturated hues.