The five box-shadow parameters
- x-offset — horizontal distance. Positive = right.
- y-offset — vertical distance. Positive = down.
- blur-radius — how soft the shadow fades. 0 = crisp edge.
- spread-radius — grows (positive) or shrinks (negative) the shadow before blurring.
- color — any CSS color, typically with alpha (rgba, or hex +
00-ff).
An optional inset keyword flips the shadow inward, simulating an inner glow or recessed effect.
Realistic shadows: use multiple layers
Real depth comes from stacking 2-4 subtle shadows rather than one big one. Try:
- Sharp shadow: 0 1px 2px rgba(0,0,0,.2)
- Soft shadow: 0 10px 30px rgba(0,0,0,.15)
- Stack them:
0 1px 2px rgba(0,0,0,.2), 0 10px 30px rgba(0,0,0,.15)
Related tools
- Color Picker — Pick colors, convert hex/RGB/HSL/OKLCH, and check WCAG contrast.
- Favicon Generator — Generate favicon package from any image or emoji. Multiple sizes (16, 32, 48, 180, 192, 512), manifest.json, and HTML snippet.
- Flexbox Generator — Visual CSS Flexbox playground. Live preview + copyable CSS. Control direction, wrap, justify, align, gap. Example child layouts.
- CSS Grid Generator — Visual CSS Grid layout builder. Configure columns, rows, gaps, and named areas. Live preview with copyable CSS output.
Pillar
Part of Frontend & Design.
Written by Mian Ali Khalid. Last updated 2026-04-25.