CSS box-shadow is one of those properties that looks simple until you actually need it. Offset? Blur? Spread? Inset? Getting it right by hand takes trial and error. A box shadow generator removes the guesswork so you can focus on design, not syntax.
Try the Box Shadow Generator →
The box-shadow Syntax
box-shadow: [inset] <offset-x> <offset-y> [blur-radius] [spread-radius] <color>;| Value | Description |
|---|---|
inset | Optional. Shadow is drawn inside the element. |
offset-x | Horizontal offset. Positive moves right, negative moves left. |
offset-y | Vertical offset. Positive moves down, negative moves up. |
blur-radius | Optional (default 0). Higher = softer shadow. |
spread-radius | Optional (default 0). Positive expands, negative contracts. |
color | Any CSS color value. Use rgba() for transparency. |
Common Patterns
Subtle card shadow
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);This two-layer approach creates a natural depth: a tight shadow at the base and a wider ambient shadow above it. It’s the pattern behind Material Design’s elevation system.
Inset shadow (inner glow)
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);Useful for text inputs, pressed button states, or any element that should appear sunken.
No blur (hard shadow)
box-shadow: 4px 4px 0 #000;Zero blur gives a sharp, offset shadow — popular in neo-brutalist UI design. The color doesn’t need to be dark; try #facc15 for a yellow accent shadow.
Glow effect
box-shadow: 0 0 12px 4px rgba(99, 102, 241, 0.5);Both offsets at zero, nonzero blur and spread: the shadow radiates symmetrically. Use with brand colors for hover states.
Layering Multiple Shadows
You can stack shadows by separating them with commas:
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.07),
0 2px 4px rgba(0, 0, 0, 0.07),
0 4px 8px rgba(0, 0, 0, 0.07),
0 8px 16px rgba(0, 0, 0, 0.07);Each layer doubles in offset and radius. The result is a smooth, realistic shadow that doesn’t have a single harsh edge.
Performance Notes
box-shadow triggers paint but not layout. It is hardware-accelerated by most browsers when applied to elements that are already composited (e.g., elements with transform or will-change: transform). Avoid animating box-shadow on low-powered devices — prefer animating opacity on a pseudo-element instead:
.card::after {
content: '';
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
opacity: 0;
transition: opacity 0.3s;
}
.card:hover::after {
opacity: 1;
}Browser Support
box-shadow has universal support across all modern browsers. No prefix needed. The inset keyword and multiple shadows are also fully supported.
Why Use a Generator?
Manually tweaking four numeric values plus a color is slow. A visual generator lets you:
- Drag offsets and see the shadow update in real time
- Adjust blur and spread with sliders
- Toggle inset mode
- Copy the CSS directly into your project
Open the Box Shadow Generator →
Quick Reference
| Effect | CSS |
|---|---|
| Drop shadow | box-shadow: 0 4px 6px rgba(0,0,0,0.1) |
| Inset | box-shadow: inset 0 2px 4px rgba(0,0,0,0.15) |
| Glow | box-shadow: 0 0 8px 2px rgba(99,102,241,0.4) |
| Hard shadow | box-shadow: 3px 3px 0 #000 |
| No shadow | box-shadow: none |