CSS Box Shadow Generator

You want a card that looks like it floats slightly off the page, not like it got hit with a default Material drop shadow. Slide the offset, blur, and spread until the shadow feels right, then copy the CSS line and move on.

Preview updates live, so the moment a shadow looks too heavy or too soft you'll see it before it ships. Multiple shadow layers stack — useful for the soft-plus-tight combo that gives elements actual depth instead of a smudge underneath them.

Inset shadows, colored shadows, and the alpha channel on the color picker all work the same way. Outputs the standard `box-shadow` property ready to paste into your stylesheet or a Tailwind arbitrary value.

Under the hood you're constructing a value for the standard CSS `box-shadow` property. The syntax is `offset-x offset-y blur-radius spread-radius color`, optionally prefixed with `inset`. The browser draws a copy of the element's box, offsets it, blurs the edges according to the blur radius, expands or contracts it by the spread, then composites the resulting shape underneath (or above, for inset). Multiple shadows in a comma-separated list paint in source order, with the first listed shadow rendering on top of later ones — which only matters when you're stacking shadows of different colors.

A worked example: a card on a near-white background. One shadow at `0 1px 2px rgba(0,0,0,0.06)` for the tight contact line; a second at `0 8px 24px rgba(0,0,0,0.08)` for the soft ambient lift. Together they read as a card that's a few millimeters off the surface — much closer to how shadows actually work in the real world, where there's both a sharp shadow near the contact point and a softer ambient one farther out. A single `0 10px 20px rgba(0,0,0,0.2)` shadow will technically work, but it ends up looking like the card is hovering an inch off the page on a cloudy day.

Where this trips you up: the spread parameter is rarely useful in positive values. A 10px positive spread on a soft blur turns into a halo, which almost never looks like real depth. Negative spread, on the other hand, is genuinely powerful — it pulls the shadow shape inward before the blur is applied, which is how you get those subtle 'lifted' shadows that don't extend wider than the card itself.

If you find your shadows behaving unexpectedly, check for stacking contexts. A parent with `overflow: hidden` will clip your shadow at the parent's edge. A parent with `transform` or `filter` creates a new stacking context that can hide shadows from elements behind it. The `box-shadow` itself is fine; the surrounding CSS is the saboteur.