Box Shadow Generator — CSS Drop Shadow Builder

The tool keeps every box-shadow as a structured list of layers in memory. A layer is six values: horizontal offset, vertical offset, blur radius, spread radius, colour, and an inset flag. Every time you change a slider or a colour, the layer list is re-serialised to a CSS box-shadow value via a pure local module. The same string is fed into the preview swatch's inline style and into the read-only output box, so what you see is exactly what you copy.

Grammar. The CSS Backgrounds and Borders Module Level 3 §7.1 defines the property as: box-shadow: none | <shadow># ; and each shadow as inset? && <length>{2,4}&& <color>?. The lengths are, in order: offset-x, offset-y, blur-radius, spread-radius. blur-radius and spread-radius both default to 0 when omitted. Multiple shadows are comma-separated, painted back-to-front in the order they appear — the first shadow in the value sits on top.

Blur vs spread.Blur applies a Gaussian softening of the shadow edge. The exact algorithm is not normative — browsers use slightly different blur kernels — but every modern engine produces a visually similar fall-off. The spec requires blur-radius to be non-negative; this generator rejects negatives at input time with a specific error rather than letting the renderer silently clamp them. Spread is a hard size change: the shadow shape is grown (positive) or shrunk (negative) by the spread amount in every direction before the blur is applied. Negative spread is the trick behind “Material Design”-style shadows that hug the element on the sides but pool deeply under the bottom edge.

Inset. Prefix the keyword inset and the shadow is painted inside the box rather than outside. Inset shadows are clipped to the padding edge so they don't bleed into child elements. The most common patterns are a recessed input field (subtle inset shadow below the top edge) and a hard inner ring (zero offset, zero blur, positive spread, opaque colour). Inset and non-inset shadows can be mixed in the same value.

Multi-layer realism. A single shadow with a large blur fakes softness poorly because the edge density is uniform. Naturalistic shadows from a diffuse light source have a continuous fall-off — brighter near the casting object, fainter farther away. Stacking several shadows with progressively larger blurs and slightly lower opacities samples that curve. The default preset on this page is a six-layer stack that produces a believable elevation on a card-style element.

Output formats. The generator emits three: the full box-shadow: declaration ready to paste into a stylesheet, the value-only form ready to drop into a styled-component or inline style attribute, and a Tailwind v4 shadow-[…]arbitrary value. The Tailwind path replaces spaces with underscores per Tailwind's escaping rule so the class string round-trips through the v4 just-in-time bundler.

Every output is silently round-trip verified on load — the eight built-in presets are serialised, parsed back via a small companion parser, and compared layer-by-layer. The badge in the editor header confirms the check passes. Same credibility check shipped with the CSS gradient generator and JSON formatter elsewhere on this site.

• W3C — CSS Backgrounds and Borders Module Level 3 §7.1 Box Shadow
• MDN — box-shadow property reference
• Tailwind CSS — Box Shadow utility documentation

Specifications last reviewed on 2026-05-11. CSS Backgrounds Module Level 4 is a Working Draft; when proposed changes around shadow grouping and interpolation land in REC, this page is re-verified.