How to use CSS Box Shadow Builder
- Adjust the offset, blur, spread and color.
- Preview the shadow on the sample card.
- Copy the resulting CSS declaration.
DEVELOPER TOOLS / FREE ONLINE TOOL
CSS Box Shadow Builder
Create a CSS box-shadow visually by adjusting horizontal offset, blur, spread and color.
✓ Browser only✓ No signup✓ Copy or download
Limitations and useful tips
Browser rendering may differ slightly; the generated declaration is standard CSS.
How to use CSS Box Shadow Builder
- Enter input for CSS Box Shadow Builder.
- Run the inspection locally.
- Review and copy the result.