CSS Box-Shadow Generator — Free Online Tool
Design box-shadow CSS values visually. Add up to 5 independent shadow layers, adjust h-offset, v-offset, blur radius, spread, color, and opacity. A live preview updates in real time. Copy the ready-to-paste CSS output directly into your stylesheet.
100% client-side. No uploads. Your data never leaves your browser.
How to use CSS Box-Shadow Generator
- Adjust the H-Offset, V-Offset, Blur, and Spread sliders for layer 1.
- Pick a color and set opacity.
- Toggle 'Inset' to draw the shadow inside the element.
- Add more layers for complex depth effects.
- Copy the CSS output and paste it into your stylesheet.
Frequently Asked Questions
What is the difference between blur and spread?
Blur controls how soft/diffuse the shadow edges are (0 = sharp). Spread adds (positive) or subtracts (negative) from the shadow's size before blurring. Use negative spread to pull the shadow behind the element.
What is an inset shadow?
Inset draws the shadow inside the element rather than outside. Useful for pressed-button effects, inner glow, and embossed UI components.
Can I have multiple shadows?
Yes. CSS box-shadow accepts a comma-separated list. Add up to 5 layers in the builder — each renders independently and they stack visually.
Related tools
Related reading
Browse all free tools · theproductguy.in