The box-shadow property looks simple but hides surprising depth. Here is everything you need to know about multi-layer shadows, inset effects, and production-ready presets.
Syntax recap
``css
box-shadow: [inset] offset-x offset-y [blur] [spread] color;
`
- offset-x / offset-y: direction of the shadow. Negative values go left/up.
- blur: soft edge (0 = sharp). Cannot be negative.
- spread: expand (+) or shrink (-) the shadow beyond the element.
- inset: puts the shadow inside the element instead of outside.
Multiple layers
Comma-separate shadows. First shadow draws on top:
<code>css
<p>.card {</p>
<p>box-shadow:</p>
<p>0 1px 3px rgba(0, 0, 0, 0.12),</p>
<p>0 8px 32px rgba(0, 0, 0, 0.06);</p>
<p>}</p>
</code>
The pattern: one tight, crisp shadow for definition — one wide, soft shadow for ambient depth. This matches how real light behaves.
Inset for pressed states
<code>css
<p>.btn:active {</p>
<p>box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);</p>
<p>transform: translateY(1px);</p>
<p>}</p>
</code>
Combine inset shadow + 1px translateY for a convincing button press.
Border replacement
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5) is a zero-blur, zero-offset shadow that acts like an outline — respects border-radius and doesn't affect layout.
Glow effect
Zero offset + large blur + saturated colour:
<code>css
<p>.neon {</p>
<p>box-shadow:</p>
<p>0 0 10px rgba(47, 133, 90, 0.5),</p>
<p>0 0 40px rgba(47, 133, 90, 0.2);</p>
<p>}</p>
</code>
Quick reference table
| Use Case | CSS |
|----------|-----|
| Soft card | 0 2px 8px rgba(0,0,0,0.08) |
| Material elevation | 0 1px 3px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08) |
| Focus ring | 0 0 0 3px rgba(66,153,225,0.5) |
| Inset press | inset 0 2px 6px rgba(0,0,0,0.2) |
| Glow | 0 0 20px rgba(47,133,90,0.4)` |
You can build and preview all of these visually at SnappyTools CSS Box Shadow Generator — sliders for every parameter, multi-layer support, live preview, and one-click CSS copy.
Originally published at https://snappytools.app/css-box-shadow-generator/