Shadow Generator
Design CSS box shadows with sliders for offset, blur, spread and color, and copy the CSS code — free, fast and private.
How to use Shadow Generator
- Move the sliders to set offset, blur and spread.
- Pick a shadow color and opacity.
- Preview the shadow on the box live.
- Click Copy CSS to use the shadow in your project.
Note: this tool runs in your browser. Nothing is uploaded.
Frequently Asked Questions
Is the Shadow Generator free?
Yes, it is 100% free with no sign-up.
What CSS does it generate?
It generates a standard box-shadow declaration with horizontal offset, vertical offset, blur, spread and an RGBA color.
Can I make an inset shadow?
Yes. Tick the inset checkbox to turn the shadow inward.
Does it work on mobile?
Yes, the sliders and preview work on phones and tablets.