Color & Design Tools / CSS Box Shadow Generator
CSS Box Shadow Generator
Visually build a CSS box-shadow with live preview.
Features
- Full control over offset, blur, spread, opacity
- Inset shadow support
- Live preview
- Free, unlimited use
How to Use
Step 1
Adjust the sliders for offset, blur, and spread.
Step 2
Choose a shadow color and opacity.
Step 3
Copy the generated CSS.
About This Tool
CSS Box Shadow Generator lets you adjust offset, blur, spread, color, and opacity with sliders while seeing a live preview, then copy the exact CSS code.
Frequently Asked Questions
What does inset do?
It creates an inner shadow instead of one cast outward from the element.
Can I use multiple shadows?
This tool generates one shadow at a time; combine multiple manually in CSS if needed.