CSS Box Shadow Generator
Design CSS box shadows with sliders for offset, blur, spread, color and opacity — including inset shadows — and watch the live preview. Copy clean CSS when it looks right.
CSS
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.35);How to use
- Drag the sliders for X/Y offset, blur and spread.
- Pick a shadow color and opacity; toggle inset if needed.
- Copy the box-shadow CSS with one click.
Frequently asked questions
Blur softens the shadow's edge; spread grows (or shrinks, when negative) the shadow before blurring. Soft UI shadows use large blur with low opacity.
This tool generates one shadow; in CSS you can comma-separate several box-shadow values to stack them.