Shadow
Compose a layered box-shadow, because real depth is several soft shadows rather than one hard drop.
One hard drop shadow reads as a sticker. Height reads as a series: each layer doubles its offset and blur while its opacity falls, which is what an area light actually does to an occluder. Tint the hue toward the background instead of using pure black — grey shadows are what make a light UI look dirty.
0 1px 2px rgba(15, 23, 42, 0.1), 0 8px 24px -6px rgba(15, 23, 42, 0.18)
Paste anything real: a whole box-shadow declaration, inset at either end, the colour before the lengths, commas inside rgba(), rem or pt units. Valid input loads into the stack as you type.
Counted against a 304 × 176 element — the card above. A Gaussian blur is paid per blurred pixel per layer on every repaint, so the trap is not the layer count, it is one enormous radius on something that scrolls.
drop-shadow(0 1px 2px rgba(15, 23, 42, 0.1)) drop-shadow(0 8px 24px rgba(15, 23, 42, 0.18))
L2 approximate — a -6px spread is dropped, so this layer converts wider and heavier than it looks.
drop-shadow follows the alpha silhouette, not the border box: transparent cut-outs cast shadow too, and each one is a separate filter pass on its own layer.
A single `box-shadow` with a big blur reads as a smudge. Shadows that look convincing are stacked: a tight, nearly opaque layer close to the element for contact, and progressively larger, fainter layers for ambient light.
Stack as many layers as you want with individual offset, blur, spread and colour, preview them on a surface, and copy the CSS. Presets cover the usual elevation steps if you would rather start from something reasonable.
What people open it for
- Building an elevation scale for a component library
- Replacing a flat drop shadow with something that reads as depth
- Generating CSS for a card or modal shadow
In the terminal
tools shadow
Every utility is also a command in the desktop's shell.