Box Shadow Generator
Design CSS box shadows visually — set offset, blur, spread and color, preview live, and copy the ready-to-use CSS — free, fast and private.
Preview box
Move the sliders to design your shadow.
How to use Box Shadow Generator
- Set the horizontal and vertical offset, blur and spread.
- Pick the shadow color and opacity.
- Toggle inset for an inner shadow.
- Copy the generated CSS and paste it into your stylesheet.
Note: this tool runs in your browser. Nothing is uploaded.
Frequently Asked Questions
What do offset, blur and spread do?
Offset moves the shadow, blur softens its edge, and spread grows or shrinks it. Together they control the shadow's look.
What is an inset shadow?
An inner shadow drawn inside the element instead of outside it — useful for pressed or recessed effects.
Can I use the CSS in any project?
Yes — the output is standard CSS that works in all modern browsers.
Is my data uploaded anywhere?
No. The shadow is generated in your browser.