CSS Box Shadow Generator
Adjust the sliders to design a shadow and copy the CSS. The preview updates live.
🔒 Everything you type stays in your browser. Nothing is sent to a server.
By Shah Rukh, software developer · Last updated:
box-shadow syntax
box-shadow: [inset] x-offset y-offset blur spread colour;
- Offsets move the shadow right/down (positive) or left/up (negative).
- Blur softens the edge. 0 gives a hard shadow.
- Spread grows or shrinks the shadow. A negative spread with a big blur looks natural.
- Inset draws the shadow inside the box, like a pressed button.
Shadows that look good
Real shadows are soft and low-opacity. Try 10–25% opacity, a vertical offset and a slightly negative spread. For depth, stack two shadows separated by a comma: a small sharp one and a big soft one.
Frequently asked questions
Can I add multiple shadows?
Yes. Separate shadows with commas in the CSS, for example a small close shadow plus a large soft one.
Does box-shadow affect layout?
No. Shadows don’t take up space or move other elements.
What’s the difference with drop-shadow?
filter: drop-shadow() follows the shape of transparent images; box-shadow always follows the box.
Related tools
QR Code Generator
Free QR codes for links, Wi-Fi, text and contacts.
Color Picker & Palette
HEX, RGB and HSL codes plus matching palettes.
Contrast Checker
Check WCAG AA/AAA colour contrast for text.
Base64 Encoder / Decoder
Encode or decode Base64 text (UTF-8 safe).
URL Encoder / Decoder
Percent-encode or decode URLs and query strings.
Binary / Hex Converter
Convert between binary, octal, decimal and hex.