CSS Box Shadow Generator
Design a box-shadow visually and copy the CSS — offset, blur, spread, color and inset, with a live preview.
CSS
How it works
1
Set the offset
Drag Offset X and Y to move the shadow horizontally and vertically.
2
Soften it
Use Blur to soften the edge and Spread to grow or shrink the shadow.
3
Pick a color
Choose the shadow color and its opacity, or toggle an inset shadow.
4
Copy the CSS
Copy the box-shadow value into your stylesheet.
Frequently Asked Questions
Inset draws the shadow inside the element instead of outside — useful for pressed or inner-glow effects.
Use a small offset, a larger blur and a low opacity — the live preview makes it easy to dial in.
No — the shadow is generated in your browser.
Generate CSS box-shadows visually and free. Drag sliders for the horizontal and vertical offset, blur radius, spread and opacity, choose a color, and toggle inset — all with a live preview — then copy the box-shadow CSS. It is the fastest way to design subtle card shadows, floating buttons and inner glows, and it runs entirely in your browser.