Choose the active layer
Each tab maps to one comma-separated shadow in exact paint order.
One auditable CSS property
Build multi-layer box shadows without rewriting CSS
Tune offsets, blur, spread, colour, opacity and inset while the browser renders the exact ordered layers. Copy one stable declaration; no value leaves the isolated capsule.
No account · no network · 1–8 layers · deterministic CSS
Three explicit steps
Add, tune, copy
Tune explicit values
Offsets, blur, spread, colour, opacity and inset all appear in copied CSS.
Copy one declaration
Paste it into the real component and verify its boundary and focus states.
Developer and design handoff
Useful when visual depth needs exact CSS
- Tune a restrained card or panel shadow and hand off the exact declaration.
- Separate contact and ambient depth into independently reviewable layers.
- Compare outer and inset geometry without rewriting syntax by hand.
Local by construction
Turn visual depth into exact CSS
Compose the layers, copy the declaration, then verify boundaries, focus and compatibility in the component that will use it.