CSS Box Shadow Generator
Create CSS box-shadow with live preview — offset, blur, spread, colour, opacity and inset — copy the code, in your browser.
box-shadow: 4px 8px 24px -2px rgba(0, 0, 0, 0.25);🔒 Generated in your browser — nothing is uploaded.
Design CSS box-shadow visually
Drag sliders for horizontal and vertical offset, blur, spread and opacity, pick a colour, and toggle inset — the
preview updates live and the box-shadow declaration is generated ready to copy into your CSS.
What each value does
Offset X/Y move the shadow, blur softens its edge, spread grows or shrinks it, and inset draws the shadow inside the element instead of behind it.
Frequently asked questions
What is an inset shadow?
Inset draws the shadow inside the element, creating a pressed or inner-glow effect instead of a shadow behind it.
Can I use negative offsets?
Yes. Negative X moves the shadow left and negative Y moves it up, so you can cast the shadow in any direction.
Is anything uploaded?
No. The shadow is generated in your browser from your slider values; nothing is sent to a server.