Box Shadow Generator

Blur softens the edge; spread changes the size before any softening happens. Raise blur and the shadow keeps its footprint but fades outward from it, roughly half the blur radius spilling either side of the original edge. Raise spread and the whole shape grows in every direction, as though the element were larger, while a negative spread shrinks it. Most everyday shadows are a small offset, a moderate blur and zero spread. Spread earns its keep in two narrower jobs: a negative value to pull a wide blur back in so it does not leak past the sides, and a positive value with no blur at all, which draws a solid outline without affecting layout the way a border does.

Offset it further than you blur it, then use negative spread to pull the other edges back. For a shadow only underneath, set the horizontal offset to zero, give it a vertical offset, and set spread to a negative number close to the blur value — the shadow shrinks on every side while the downward push keeps the bottom edge visible. It is a subtraction rather than a mask, so it stays approximate: at large blur values a faint halo still escapes at the corners. If you need a genuinely clean edge on one side and nothing anywhere else, a border or a linear-gradient will do it more honestly than a shadow will.

Work through these in order. The element has no dimensions, so there is nothing to cast from — an inline element with no height is the usual case. The shadow exists but a parent with overflow: hidden is clipping it. The colour is too close to the background, which happens the moment opacity drops too far on a light page. inset is switched on, so the shadow is drawn inside the box and a solid background colour paints over it. Or a later rule wins the cascade: box-shadow does not accumulate across rules, so a second declaration replaces the first rather than adding to it, and one none anywhere downstream removes the lot.

box-shadow follows the border box and the border-radius, so it always produces a rounded rectangle however transparent the content inside happens to be. filter: drop-shadow() follows the alpha channel, which is what you want for a transparent PNG, an icon, an SVG glyph or an element with a clip-path applied. The costs are real. drop-shadow has no spread value, cannot be inset, applies to everything the element paints including its children, and is generally more expensive to render because the browser has to work out the shape before it can blur it. The argument order differs too, so a value copied from one will not drop into the other.

A single shadow tends to look like a sticker, because real light produces two things at once: a tight dark contact shadow where the object meets the surface, and a broad faint ambient one. The usual fix is two or three shadows in one comma-separated list — a small offset with a tiny blur at low opacity, plus a larger offset with a much wider blur at lower opacity again. Then tint them. Pure black desaturates whatever is behind it and reads as grey wash; taking the hue of the surface and darkening it gives a shadow that belongs to the page. Reduce opacity as blur rises, or the wide layer turns to fog.

Enough to matter in the wrong place. A shadow is a blur, and blurs cost more the wider they are and the more often the browser has to recompute them. A page of static cards with modest shadows is not worth worrying about. Animating box-shadow on hover is the usual culprit, because every frame re-blurs the shape; the common workaround is to leave the shadow fixed and animate the opacity of a pseudo-element carrying a second shadow, or to animate transform and let the shadow sit still. Very large blur radii repeated across many elements, especially inside a long scrolling list, are the other case worth measuring rather than guessing at.

Shadows work by darkening, and there is very little room to darken a background that is already dark — black on near-black is invisible, which is why interfaces that lean on elevation in light mode look flat the moment they are inverted. The convention is to stop simulating light and start signalling separation: raise the surface colour instead, so a card is a lighter grey than the page behind it, and treat any shadow as a faint accent rather than the main cue. Where you still want depth, a hairline border or a subtle inset highlight along the top edge does more than pushing opacity up, which only produces a smudge.

Nothing leaves the page. The seven values are ordinary component state in your browser, the CSS line is assembled from them in the same function that renders the preview, and no request goes to a server at any point — no account, no upload, no image generated elsewhere. Nothing is written to storage either, and that cuts both ways: there is no history, no undo and no saved presets, so refreshing the tab returns every control to the starting values of a 4px right, 4px down, 10px blur black shadow at a quarter opacity. Copy the declaration into your stylesheet before you close the tab, because the tool is not holding it for you.