CSS Gradient Shadow Generator

Why doesn't box-shadow do this?

box-shadow only ever takes a single solid color — there's no way to hand it a linear-gradient(), radial-gradient() or conic-gradient(), no matter how many stops you throw at it. To get a colorful, blurred "glow" or "aura" behind a card, button or image, you need a different trick: a ::before pseudo-element positioned behind the element (z-index: -1), sized slightly larger via a negative inset, filled with a gradient background, and softened with filter: blur(). That's exactly what this tool generates.

How to use this tool

1. Pick a Gradient Type — Linear (a straight sweep across an Angle), Radial (fades outward from the center), or Conic (sweeps around a center point starting at an Angle).
2. Set 2 to 4 color stops, each with its own color and position percentage. Tick Add a third color stop and Add a fourth color stop to bring in more.
3. Adjust Blur (how soft the glow's edge looks), Spread (how far the glow extends beyond the element's edges), Opacity, and Border Radius (match this to the element's own border-radius so the glow follows its shape).
4. Copy the generated CSS into your stylesheet, then add class="glow" to the element you want the glow behind (or rename the class to match your own naming) — the element itself just needs position: relative, which the generated .glow rule already sets.
5. The Preview shows the effect live; the HTML Snippet below it is the same result as a self-contained, inline-styled markup you can paste anywhere a stylesheet isn't convenient.

Why does the parent need position: relative?

The glow lives on a ::before pseudo-element set to position: absolute, which positions itself relative to the nearest positioned ancestor. Without position: relative on the parent, the glow would instead anchor to the page (or the next positioned ancestor up the tree) and land in the wrong place entirely. The generated CSS sets this for you as part of the .glow rule.

The .glow rule also sets isolation: isolate; alongside position: relative;. On its own, position: relative doesn't create a new stacking context — so the pseudo-element's z-index: -1 would escape past its sibling and stack against whatever ancestor does own the page's stacking order, which can hide the glow completely behind an opaque background further up the tree. isolation: isolate pins the stacking context to .glow itself, so z-index: -1 only ever means "behind my own content," which is what makes the glow visible around the element's edges.

FAQ

Will this work in every browser? Yes — ::before, filter: blur() and all three gradient functions have been supported in every major browser for years, no vendor prefixes needed.

Can I put real content in front of the glow? Yes, that's the point — z-index: -1 keeps the gradient strictly behind the element's own background and content, so text and images in front stay perfectly sharp even at a heavy blur.

I just need a single-color blurred shadow, not a gradient — is there a simpler tool? Yes, use the CSS Box Shadow Generator — a plain box-shadow is lighter-weight and doesn't need a pseudo-element when a single solid color is all you want.

I want the gradient itself, not a glow behind something — where's that? The CSS Gradient Generator builds a plain background: linear/radial/conic-gradient(...) declaration for filling an element directly, which is also where this tool's color-stop controls come from.

What about a frosted-glass look instead of a glow? That's a different effect (a translucent, blurred background, not a glow behind the element) — see the CSS Glassmorphism Generator.

Privacy

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