Box Shadow Generator

about this tool

Layers

A box-shadow is a list of layers, each [inset] x y [blur [spread]] colour, painted in order with the first on top. The tool edits them as a list: offsets, blur and spread in pixels, any CSS colour, an inset flag, and arrows to reorder. A layer with a problem — a negative blur, which makes the browser drop the whole declaration rather than shrink the shadow, or a colour it cannot read — is flagged on its row and left out of the output until it is fixed, so the preview never goes blank without saying why.

The CSS is written the way a person would: zero lengths as 0, blur and spread omitted when they are zero, one layer per line when there are several, and a solid box-shadow: …; declaration ready to paste. Colours stay as you typed them; rgb(0 0 0 / 0.1) is not rewritten as hex.

Smooth shadows

One shadow is uniformly soft, which is why single-layer shadows look like a grey smear. Real shadows are dark and tight near the object and fade with distance, and the standard way to fake that is several layers whose offset and blur grow with the square of their index at a low, constant opacity. The generator does this from five settings — layer count, final offset, final blur, per-layer alpha and colour — and replaces the layer list, so you can then tune individual layers by hand.

Tailwind

Tailwind v4 ships a shadow scale (shadow-2xs through shadow-2xl, plus inset-shadow-2xs, -xs and -sm). The tool compares your layers against those values by geometry and colour value — so #0000001a matches rgb(0 0 0 / 0.1) — and writes the named class when one fits. Otherwise it writes an arbitrary value, shadow-[…], with underscores in place of spaces and layers separated by bare commas, which is the syntax Tailwind requires. The presets include Tailwind's md and xl, Material Design's 2dp and 8dp elevations, a hard offset shadow (the kind this site uses), a hairline border, a focus ring, a glow, a pressed inset and a neumorphic pair.

Reach

Every outset layer extends the painted area by its offset plus blur plus spread on the side it leans to. The preview states the reach on all four sides, because that is the padding a parent with overflow: hidden needs, and the margin a screenshot needs, for the shadow not to be cut off. Inset layers count for nothing here; they paint inside.

Importing

Paste a box-shadow value or a whole declaration — vendor-prefixed is fine — and it becomes editable. Lengths must be in pixels (a rem value is refused with a hint about converting it), 0 may be unitless, the colour may sit before or after the lengths as browsers allow, and a layer with no colour is read as currentColor, which is what the browser would do. Anything else is refused with the reason.

Limits

Pixels only: the editor has no unit switch, so em and rem shadows are imported by converting them yourself. filter: drop-shadow() and text-shadow are different properties with different behaviour and are not generated here. The Tailwind match covers the default theme, not a customised one. The preview is a plain rectangle; a shadow on a rounded or clipped element follows that shape, but is otherwise the same. Nothing is stored.

For the frosted and extruded looks that build on layered shadows, use glassmorphism & neumorphism. To round or clip the box itself, border radius & clip-path.

questions

What do the four numbers in box-shadow mean?

In order: x offset, y offset, blur radius and spread radius, then the colour. box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) sits 4px below the box, blurs over 6px and is shrunk 1px on every side. Blur and spread are optional; a leading inset keyword paints the shadow inside the box instead.

Why does my shadow disappear when blur is negative?

The specification forbids a negative blur radius, so the browser treats the whole declaration as invalid and paints no shadow at all — not a smaller one. To make a shadow smaller than the box, keep blur at zero or above and give it a negative spread.

How do I make a realistic, soft shadow?

Stack several layers rather than one. A single shadow is uniformly soft; real shadows are dark and sharp near the object and fade with distance. Four to six layers whose offset and blur grow with the square of their index, each at a low opacity such as 0.07, give that look. The smooth-shadow generator builds exactly this.

Which shadow does Tailwind’s shadow-md produce?

In Tailwind v4, shadow-md is 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1). The scale runs 2xs, xs, sm, md, lg, xl, 2xl plus three inset sizes; the tool recognises all of them and writes the short class when your layers match one, and shadow-[…] otherwise.

Why is my shadow cut off?

A parent with overflow: hidden, or a scroll container, clips anything outside its box, and a shadow lives outside. The preview reports how far the shadow reaches on each side — blur plus spread plus offset — which is the padding the parent needs, or the margin to add to a screenshot.