A white card on a white page reads flat even when the layout is correct. The fix is usually one line of box-shadow, yet the shorthand hides four separate decisions behind a single comma. Drag the sliders above and you see which knob moves the shadow down the page, which one softens the edge, and which one grows the footprint without shifting position.
Four lengths, one optional keyword
Every outer shadow follows the same grammar:
box-shadow: offset-x offset-y blur-radius spread-radius color;Horizontal offset pushes the shadow left or right. Vertical offset pushes up or down. Blur feathers the edge. Spread inflates or shrinks the shadow shape before blur runs, which is why a spread of -4px tightens a focus ring while blur alone only softens.
Prefix inset flips the shadow inside the border box. Inset shadows read as pressed surfaces, recessed wells, or inner borders. They still respect border-radius, so pairing this generator with the Border Radius Generator shows the full silhouette before you copy either rule.
Layer order is paint order
Comma-separated shadows stack front to back. The leftmost layer in your CSS sits on top visually, which trips people up because we read source code top to bottom.
Real depth often needs two or three layers: a tight dark contact shadow near the base, a wider soft ambient shadow farther out, sometimes a faint highlight on the opposite edge. The Stacked depth preset loads three layers you tweak from there. Remove one if the card starts looking muddy.
Spread is the slider teams forget. Blur alone never makes a shadow larger than the element footprint unless offset pushes shadow mass outside the box. Spread grows the shape symmetrically before blur, which is how material-style elevation cards get a wide, low-opacity halo without dragging the shadow ten pixels down.
Neumorphism needs two shadows, not one heavy blur
Soft UI panels pair a light inset highlight with a dark outer drop shadow on the same element. One giant blurred shadow on a grey background looks like a smudge. Two modest layers on a background matching the fill read as sculpted plastic.
The Neumorphic preset loads both sides. Change the preview background to Light before judging contrast. Neumorphic schemes fall apart on arbitrary page colors because the illusion depends on the surface color matching the page behind the element.
When filter: drop-shadow() wins
box-shadow follows the border box, including transparent corners on PNG icons or irregular clip-path shapes. A star cut with clip-path still casts a rectangular shadow until you switch to filter: drop-shadow(), which traces the painted alpha.
Drop filters also follow transformed elements more predictably in older stacking contexts. For standard cards, buttons, and inputs, box-shadow stays the right tool. For icons, SVG marks, or clipped badges, reach for filter instead. This page outputs box-shadow only.
Performance and spread on large surfaces
Each shadow layer triggers an extra paint pass. Three layers on a thousand-row table cost more than three layers on one modal. Keep stacked shadows on components that stay on screen, not on every list cell.
Large spread values on full-width sections also look wrong fast. Spread scales the shadow shape equally in every direction, so a 40px spread on a hero banner produces a fog bank. Elevation on wide surfaces usually wants a modest vertical offset, high blur, low opacity, zero spread.
What this generator does not output
text-shadow. Text shadows use a separate property with no spread argument. Letterforms need their own rule, not a value copied from here.- Multiple selectors or states. Copy the value into your own
:hoveror:focus-visiblerules. This tool does not emit pseudo-class blocks. filter: drop-shadow(). Alpha-aware shadows for icons belong in a filter rule, not here.- Motion. Animated shadows need
transitionor@keyframeswrapped around the output by hand. Sudden spread changes during animation look jumpy on Safari unless you animate opacity instead.
All preview math runs locally in your browser. No shadow values leave your machine.
