OneTaskBy Tim King · Updated
Aurora Background
Glowing Blurred Colour Blobs Drifting Behind Your Content, With Tunable Glow
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Aurora Background works
An aurora background layers soft, heavily blurred colour blobs over a dark base so they melt into a glow like the northern lights. Pick up to four colours, the blur and drift speed, and copy the HTML and CSS.
This look is popular on product and AI landing pages because it feels modern and calm while leaving plenty of contrast for white text. It is built entirely from CSS, with no images.
How the aurora background is built
Each colour is a large circle placed partly off the edge of the section. A big filter: blur()
turns the circles into soft clouds that overlap and mix. Each blob runs the same slow drift
animation, which moves, rotates and grows it, but with a different negative delay, so they never
move in step and the glow keeps shifting shape.
Tuning the glow
More blur makes the colours blend into one wash, while less blur keeps distinct shapes. Dark backgrounds show the glow best. Visitors who prefer reduced motion get the same glow held still.
FAQ
Is the aurora background heavy on performance?
Large blurs cost more to draw than plain colours, but the browser only redraws the blobs as they move, and transforms are handled on the GPU. One aurora hero per page runs smoothly on phones.
Can I use an aurora background on a light page?
Yes. Set a white or pale background and choose softer pastel colours. Lower the opacity in the blob rule if the colours feel too strong, and use a dark text colour for the heading.
Why are the blobs placed off the edge of the section?
Parts of each circle sit outside the section so the glow looks like it continues beyond the frame. The section hides overflow, so nothing spills onto the rest of the page.
Can I stop the aurora from moving?
Remove the animation line from the blob rule and the glow stays still. Visitors who turn on reduced motion in their system settings already get this still version automatically.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Animated Gradient
Make a smoothly shifting gradient background in pure CSS.
Mesh Gradient Generator
Pure-CSS mesh gradients from stacked radial layers.
Starfield Background
Make stars stream past as if flying through space.
Floating Shapes
Add slowly rising, spinning shapes behind a hero section.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.