Aurora Gradient Field
A vivid mesh-gradient background of drifting colour with a bright lead bloom and a slower halo that follow the cursor across the page, built without canvas or WebGL.
About This Effect
An ambient aurora background built entirely from layered CSS radial gradients. Six colour stops drift on their own slow, non-harmonic cycles so the field never visibly repeats, and a wide conic sweep turns behind them like a curtain of light.
Read the full effect overview
A bright bloom follows the cursor around the page, arriving about a third of a second behind it, while a much wider halo follows at nearly twice the delay. That separation leaves a visible wake across the field instead of a single light welded to the pointer. The two gradient layers also lean toward the cursor by different amounts, which is what turns a flat wash into depth.
Four palettes cross-fade through a dip rather than cutting, and every one of them is a set of CSS hue tokens the script never reads, so your own palette is a copied block and six numbers.
The legibility treatment is local, not global: a feathered band of shade sits behind the reading column only, so the field runs at full strength everywhere the copy is not, and body text still measures above 5.9:1 against every palette.
There is no canvas and no WebGL, so it runs on anything and costs a fraction of a shader background.
What's Included
- Pure CSS gradient field driven by custom properties, no canvas and no WebGL
- Dual cursor light driven by gsap.quickTo: a compact bright lead bloom and a wide halo following at nearly twice the delay, both bound to the window so overlaid content never swallows movement
- Six drifting colour stops on non-harmonic cycles, so the loop is never visible
- Two gradient layers that lean toward the pointer by different amounts and in opposite directions, for parallax depth without a second asset
- Conic aurora sweep turning slowly behind the stops, which is what stops the field reading as a static wash
- Local contrast treatment: a feathered band of shade behind the reading column instead of a scrim over the whole canvas, so the field stays vivid in the margins while body text holds AA
- Four palettes included, defined purely as CSS hue tokens plus optional lightness and saturation offsets that you can copy and re-point
- Palette controls that dip the field through the change so new hues fade in instead of cutting, with the fade timeline managed so overlapping presses cannot strand it dim
- Fine grain layer that dithers the ramps and kills the banding large gradients suffer from
- Gradient writes throttled while transforms stay at full frame rate, and the field pauses off screen or in a hidden tab
- A tap equivalent on touch and a composed still under reduced motion
Perfect For
- Hero and landing page backgrounds that need depth without a heavy asset
- SaaS and product sites where the background must stay behind readable copy
- Section backdrops, footers and call-to-action bands that would otherwise be flat colour
- Login, pricing and coming-soon pages that want atmosphere with almost no payload
- Dark interfaces that need ambient colour on low-power devices where WebGL is a bad trade
How It Works
Each layer paints a stack of radial gradients whose stop positions, radii and light values are CSS custom properties. A gsap.ticker advances one parametric clock and writes those properties, so every stop moves on its own sine with an unrelated frequency and phase.
Pointer position drives two bloom layers through gsap.quickTo: the bright core follows at 0.32 seconds and the larger echo at 1.9 times that delay. Both move as offsets from the centre where CSS already parks them, so their resting state is correct before any script runs. The listener is on the window rather than the field, because the field is a background with the page's content stacked over it. The same pointer value lerps into the two layers' transforms, leaning them opposite ways for depth.
The field's light values are written every pass but held flat: only the hue drifts. That is what lets the reading band be measured once and stay correct, rather than needing a contrast check at a peak that is easy to forget.
A palette press runs a single timeline that dips the layers' opacity, swaps the palette attribute at the bottom of the dip and fades back up. There is exactly one of these at a time and it is killed before a new one is built, because two overlapping dips can otherwise leave the field almost invisible with nothing scheduled to restore it.
Every value written to a custom property is clamped and checked for finiteness first, because a non-finite number silently invalidates the declaration that reads it and takes the whole gradient with it.
An IntersectionObserver and a visibilitychange listener remove the ticker when the field is off screen or the tab is hidden. Under reduced motion the script paints a single composed frame, attaches no ticker or pointer listeners, and keeps palette controls operable with an instant colour change.