Box Shadow Generator
Craft CSS box-shadows with live sliders for blur, spread and colour.
Shadows tell the eye what sits above what — a subtle one lifts a card, a stronger one focuses a modal. Adjust the horizontal and vertical offset, blur, spread and colour with live sliders, watch the preview respond, and copy clean box-shadow CSS.
Shadows that look intentional
- Soft, low-opacity shadows almost always read as more polished than hard, heavy ones.
- Keep your offsets consistent across the interface so the implied light source stays believable.
- Stack two shadows — a tight one and a wider, softer one — for convincing depth on cards and menus.
