Box Shadow Generator with Layers and Tailwind

How CSS box-shadow works

The box-shadow property takes up to six parts per shadow: an optional inset keyword, a horizontal offset, a vertical offset, a blur radius, a spread radius and a colour. Positive x moves the shadow right, positive y moves it down. Blur softens the edge; a value of 0 gives a hard, graphic shadow. Spread grows or shrinks the shadow before blurring, so a negative spread tucks the shadow under the element and stops it bleeding out at the sides, which is how most modern card shadows avoid looking muddy.

inset draws the shadow inside the border instead of outside, making an element look pressed in. It is the basis of input fields with inner depth and of the pressed state in neumorphism.

The shadow follows the element's border-radius, so the corner radius slider in this tool changes the shadow shape too. Box shadows do not affect layout: they never push neighbouring elements around, but they can be clipped by a parent with overflow: hidden, so give the parent some padding if the edge looks cut off.

Layered shadows, elevation and neumorphism

A single CSS box shadow usually looks flat because real light produces a tight, dark contact shadow and a wide, faint ambient one at the same time. The property accepts a comma-separated list, and stacking two to five layers with increasing offset and blur gives a far more natural result. The Layered smooth preset uses five layers that double in size each time at low opacity, a technique popularised by designers writing about smoother shadows. Elevation 1 and Elevation 3 mirror the two-layer pattern of a small and large drop that design systems use for raised cards and menus.

In this box shadow generator each layer is listed separately. Select one to edit it, hide it with the eye icon to compare the result with and without it, or remove it. Layers are drawn in order, so the first one in the list sits on top.

A neumorphism shadow pairs a dark shadow offset down and right with a light shadow offset up and left, on an element the same colour as its background. Both neumorphism presets set the background and box to the same soft grey for that reason; with a contrasting background the effect disappears. Use it sparingly: the low contrast that makes neumorphic controls look soft also makes their edges hard to see for people with low vision, so pair it with a visible focus style and clear labels.

Copying CSS and Tailwind output

The CSS block contains a ready box-shadow declaration, one layer per line when there are several. Hidden layers are left out. The Tailwind arbitrary value writes the same layers as a shadow-[...] class with underscores for spaces and commas between layers, the syntax Tailwind uses for arbitrary values. That is the practical way to get a box-shadow Tailwind class that matches a design exactly instead of the nearest built-in shadow-md or shadow-lg. Because the class contains literal rgba() values, it does not change with your Tailwind theme; if you want shadows that follow design tokens, define the value once as a CSS variable or a theme shadow and reference it instead. Nothing leaves your browser while you work.