Box Shadow Generator
Design CSS box-shadows visually and copy the code.
Recommended next steps
Related tools
Convert colors between HEX, RGB, and HSL, and check WCAG contrast.
Encode text to HTML entities or decode entities back to text.
Create a QR code from any text or link and download it as PNG or SVG.
Frequently asked questions
The horizontal and vertical offsets move the shadow right/left and down/up from the element; blur radius softens its edge (0 is a hard edge, larger values are softer); and spread radius grows or shrinks the shadow's size before the blur is applied. Negative spread pulls the shadow in, which is handy for subtle lifts.
Add another layer — CSS lets you stack any number of shadows on one element by separating them with commas. The first layer in the list is painted on top. Stacking a tight, dark shadow over a wide, soft one is a common way to get a realistic depth effect.
Toggle 'Inset' to draw the shadow inside the element's border box instead of outside it, which makes the surface look pressed in or recessed. You can mix inset and outset layers on the same element.
No. Everything runs in your browser — the preview and the generated CSS are computed locally and nothing you adjust is sent to a server. Copy the code and paste it straight into your stylesheet.
Last updated 2026-06-23.