Aurora / Gradient Blob CSS Background Generator

What is an "aurora" background?

An aurora background (also called a "gradient blob" or "blob gradient" background) is the soft, glowing, out-of-focus wash of color popularized by countless SaaS marketing pages and hero sections — a handful of large, blurred colored shapes drifting behind the content. Unlike a flat linear-gradient, it reads as depth and light rather than a single flat fade.

This tool builds the effect with pure CSS: 2 to 5 colored radial-gradient() layers ("blobs"), each independently positioned and sized, stacked as comma-separated background-image layers behind your content and softened with a single filter: blur(). Turn on the optional animation and the blobs drift slowly via a generated @keyframes rule — no JavaScript, canvas, or images required at runtime.

How to use this tool

1. Pick a Base Color — the solid color shown behind the blobs — and a Blur amount. Higher blur values melt the blobs together into a smoother glow; lower values keep each blob more distinct.
2. Choose the Number of Blobs (2-5). Each blob gets its own Color, Position X/Y % (where its center sits within the container) and Size % (how far it spreads before fading to transparent).
3. Optionally enable Animate to add a slow drifting @keyframes animation — each blob glides to a nearby position and back, on a duration you control, so the background never looks static.
4. Copy the CSS and apply class="aurora-bg" to a positioned container (or rename the class to match your own stylesheet) — the blobs render on a ::before pseudo-element behind your content, so text and other children stay perfectly sharp even at a heavy blur.
5. The Preview shows exactly what the CSS produces; the HTML Snippet below it is the same markup as a self-contained, inline-styled <div> you can paste anywhere a stylesheet isn't convenient. Note the snippet always shows the resting (non-animated) frame — an inline style attribute can't carry an @keyframes rule, so the drift only appears once the CSS block (with its @keyframes aurora-drift) is actually in a stylesheet.

Why blur instead of more gradient stops?

A single filter: blur() applied to the whole layered background is what gives an aurora its characteristic soft, glowing edges — it's cheap to compute, works identically across every blob regardless of position or size, and is the same technique behind the "frosted glow" look on sites like Stripe or Linear's marketing pages. Layering it on a ::before pseudo-element (rather than blurring the container itself) keeps the blur from bleeding onto your actual content.

FAQ

Will this work in every browser? Yes. Layered radial-gradient() backgrounds, filter: blur() and CSS @keyframes animations have been supported in all major browsers for years — no vendor prefixes needed.

Why does the live preview look static even with Animate turned on? The preview renders the same inline-styled markup as the HTML Snippet below it, and an inline style attribute has no way to reference a @keyframes rule. The animation is real and included in the generated CSS block — you'll see it move once you paste the CSS into an actual stylesheet.

Can I use more than 5 blobs? Not with this tool — 5 keeps the generated CSS short and easy to hand-edit while still giving a rich, layered look. You can always duplicate a radial-gradient() layer yourself in the output if you want more.

Why is there no per-blob opacity control? Each blob already fades from full color to fully transparent by design (that's what "Size %" controls), and the global Blur further softens every blob equally — an extra opacity slider wouldn't change the visible result meaningfully, so it's left out to keep the controls focused.

Privacy

Everything happens in your browser. Your chosen colors, positions and settings are never sent to a server — the CSS, HTML and preview are generated and updated locally as you adjust the controls.