CSS Box-Shadow Generator
Design CSS box-shadows with sliders for offset, blur, spread, color and opacity. Live preview and one-click copy.
Pure browser JavaScript — generates CSS locally.
How to use this tool
- Adjust the X/Y offset, blur and spread sliders.
- Pick a shadow color and opacity, toggle inset if needed.
- Copy the box-shadow CSS.
Design CSS box-shadows with sliders for offset, blur, spread, color and opacity. Live preview and one-click copy.
Frequently asked questions
- What does spread do?
- Positive spread grows the shadow in every direction before the blur is applied; negative spread shrinks it.