Box-Shadow Generator
Design perfect CSS box shadows visually.
Shadow settings
How to use this tool
Move the sliders
Adjust horizontal and vertical offset, blur radius and spread until it looks right.
Style it
Pick a shadow color, set opacity, or flip on the inset switch for inner shadows.
Copy the CSS
One click copies the exact box-shadow declaration for your stylesheet.
Frequently asked questions
What do blur and spread do?
Blur softens the shadow's edge — higher values make it more diffused. Spread grows or shrinks the shadow's size: positive values expand it, negative values contract it.
What's an inset shadow?
An inset shadow renders inside the element instead of outside it — useful for pressed-button effects and inner depth.
Will the CSS work everywhere?
Yes. box-shadow is supported by all modern browsers with no prefixes needed.
How do I make a soft, subtle shadow?
Try a small vertical offset (8–20px), a generous blur (24–48px), zero spread, and low opacity (10–20%). That's the modern "floating card" look.
Is my data uploaded anywhere?
No. Everything runs locally in your browser — nothing leaves your device.