Guide: compose CSS box-shadow with layers and preview
Realistic shadows stack multiple layers — offset, blur, spread, and alpha color. Hand-writing `box-shadow` for card elevation is hard to reuse across a design system.
Each layer is editable with instant in-browser preview; styles never leave your machine. See how blur and spread interact before pasting into component CSS.
Use for elevation tokens (`shadow-sm`, `shadow-lg`), accessible focus rings, and UI mockups. Pair with border-radius to ensure clipped corners look right.
Step by step
- Add the first layer — Set offset X/Y, blur, spread, and RGBA color. `inset` shadows model pressed inputs.
- Stack more layers — Duplicate for soft halo + crisp drop shadow — common in Material-like UIs.
- Tune against the preview — Check contrast on light and dark backgrounds; heavy shadows break dark mode.
- Export the declaration — Copy `box-shadow: …` into CSS modules, `--shadow-*` variables, or design system docs.