Shadow lab

Shadow Generator

Build hard-edged, multi-layer shadows without blur. Tweak offsets, spreads, and opacity — the box-shadow updates live.

← Back to Home

Copy CSS shadows

box-shadow: 0px 12px 0px 16px rgba(11, 18, 32, 0.36), inset 0px 0px 0px 3px rgba(168, 85, 247, 0.20);

Shadow stack

Compose crisp layers

Use offsets for direction, spread for thickness, and opacity for volume. Add inset layers for carved surfaces.

#1layer
#2layer
Live shadow

Crisp hard-shadow preview

Stacked offsets and spreads build graphic depth without blur.

Box-shadow updates as you drag