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.
Discord Server Template
Design channels and roles, then build them in one click.
Discord Moderation Bot
Make your own mod bot with kick, ban, mute and filters.
Discord Bot Maker
Build a custom Discord bot without coding.
Discord Welcome Bot
Custom welcome messages and auto-roles for new members.
Color Picker & Palette
HEX, RGB and HSL codes plus matching palettes.