CSS Box Shadow Generator
Craft the perfect shadow and copy the CSS instantly.
100% private - files never leave your browser
Loading tool…
Create polished CSS box-shadows with a live preview. Adjust the horizontal and vertical offset, blur, spread, color and opacity, and choose inset shadows - then copy the exact CSS. It is the quickest way to get shadows just right for cards and buttons, and runs in your browser.
How to use CSS Box Shadow Generator
- 1
Adjust the shadow sliders and color.
- 2
Watch the live preview update.
- 3
Copy the generated CSS.
Frequently asked questions
Yes. Toggle the inset option for inner shadows.