Box Shadow Generator
Craft CSS box-shadows with live sliders for blur, spread and colour.
Shadows give elements a sense of elevation and focus. Adjust the horizontal and vertical offset, blur, spread and colour with live sliders, watch the preview update, and copy clean box-shadow CSS.
Shadow best practice
- Soft, low-opacity shadows read as more premium than hard, dark ones.
- Match your light source — keep offsets consistent across the UI.
- Layer two shadows for realistic depth on cards and modals.
