CSS Box Shadow Generator

Real objects cast a tight, dark contact shadow plus a wide, faint ambient one, and a single blur can't fake both. Stacking two or three layers with increasing blur and decreasing opacity reproduces that falloff. That's the whole reason to use a layered box shadow generator instead of hand-writing one value.

Up to five. Each layer keeps independent offsets, blur, spread, color, and inset state, and the output joins them with commas. The first layer in the list paints on top, so put your tightest shadow first.

Spread grows or shrinks the shadow shape before the blur applies. A negative spread like -4px pulls a big soft shadow back underneath the element, which stops cards from looking like they're glowing. It's the least understood value and the one that most improves realism.

Yes, flip the Inset switch on any layer and it draws inside the border box instead of outside. Inset shadows suit pressed button states, text input wells, and subtle top highlights. You can mix inset and outer layers in the same rule.

Almost never pure opaque black. The default here is #00000033, which is black at 20 percent alpha, and that's a sensible ceiling for most UI. On colored backgrounds, a darker shade of the background hue looks more natural than neutral gray.

It never shifts layout, since the shadow paints outside the element's box without taking space. Large blur radii do cost paint time, so if you animate a shadow on hover, transition the opacity of a pseudo-element holding the shadow rather than the box-shadow value itself.

The tool writes plain box-shadow longhand with px units and hex colors, which every current browser supports without prefixes. There's nothing proprietary in it, so it drops into vanilla CSS, Tailwind arbitrary values, or styled-components unchanged.