CSS Box Shadow Generator
Sliders for the four numbers, a colour, an inset toggle, and a preview that is the same `box-shadow` the copy button emits. No prefix soup — modern CSS does not need `-webkit-box-shadow`.
Private by design. The preview and the CSS string are computed in this tab.
FreeNo sign-upRuns in your browserDeveloperApplication
How to generate a box-shadow
- Move X, Y, blur and spread. The preview is live. Negative spread shrinks the shadow.
- Set colours. Shadow, box and backdrop are independent so you can see the shadow on a surface that is not white.
- Copy the CSS. One `box-shadow:` line. Paste it into your stylesheet.
Frequently Asked Questions
- Do I still need the -webkit prefix?
- Not for any browser that matters in 2026. The page copies the unprefixed property.
- Can I stack several shadows?
- This generator emits one. Stack by joining with commas in your CSS.
Use Cases
- Tune a card shadow without flipping back to the inspector
- Compare inset vs drop on the same box
- Hand a teammate one copy-paste line
Related tools
More free, in-browser tools from the Developer Tools set — every one runs locally, with no sign-up and no upload.
JSON FormatterPretty-print, minify, diff two JSON blobs side-by-side.Code MinifierMinify JS / CSS / HTML. Copy-ready, no dependencies.Base64 EncoderEncode or decode text and files with one click.QR GeneratorGenerate crisp SVG/PNG QR codes. Wi-Fi & vCard presets.QR ReaderDecode QR codes from an image, pasted screenshot, or live camera — free, no upload.HTML PreviewLive sandboxed HTML editor + preview with device widths — code never leaves your browser.