Home › Box Shadow Generator
Private: nothing leaves your browser. No sign-up.
Box Shadow Generator
Design perfect CSS shadows with sliders. Free, no sign-up, copy-ready code.
What it does
Drag the sliders for horizontal and vertical offset, blur radius, spread, color, and opacity. The preview card updates instantly and the tool outputs the exact box-shadow declaration to paste into your stylesheet. Toggle inset for inner shadows.
Tips
Soft, low-opacity shadows look modern: try a large blur with 10 to 20 percent black. Spread expands or shrinks the shadow beyond the element's edges.
Private by design
Everything runs in your browser. Nothing leaves your device.
Planning estimate only. Results use the list prices shown and may differ from your actual bill. Terms
Frequently asked questions
What is the difference between blur and spread?
Blur softens the shadow edges; spread grows or shrinks the shadow's overall size before blurring.
What does inset do?
Inset draws the shadow inside the element's border instead of outside, useful for pressed or recessed effects.
Is anything sent to a server?
No. The editor runs entirely in your browser.