CSS Box Shadow Generator
Create multi-layer box shadows with live preview and presets. Free, fast, and runs 100% in your browser.
Box shadows create the illusion of depth and elevation in modern UI design. This visual generator provides sliders for horizontal offset, vertical offset, blur radius, spread radius, and shadow color — with a live preview showing exactly how your shadow looks. Copy the CSS and paste it into your project for pixel-perfect shadows.
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);
Feature Overview
| Feature | Details |
|---|---|
| Offset control | X & Y axis |
| Blur radius | Adjustable |
| Spread radius | Adjustable |
| Color picker | ✓ |
| Privacy | 100% client-side |
Frequently Asked Questions
Can I add multiple shadows?
The generator creates single shadow values. For multiple shadows, combine outputs separated by commas in your CSS.
What is the spread radius?
Spread expands or contracts the shadow. Positive values make the shadow larger than the element; negative values make it smaller.
Does it support inset shadows?
Yes. Toggle the inset option to create inner shadows, commonly used for pressed button effects.