CSS Box Shadow: The Complete Design Guide

Box Shadow Syntax

box-shadow: [inset] <x-offset> <y-offset> <blur> <spread> <color>;

• x-offset: horizontal shift (positive = right)
• y-offset: vertical shift (positive = down)
• blur: softness of the shadow edge
• spread: expand or shrink the shadow
• color: shadow color (use rgba for transparency)

5 Shadow Styles Every Designer Should Know

1. Subtle Card Shadow

The most common pattern. Minimal, clean, professional.

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);

2. Elevated Card

For cards that need more visual weight, like featured content.

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.08);

3. Soft Neumorphism

Trendy raised effect. Works best on light gray backgrounds.

box-shadow: 8px 8px 16px #d1d1d1, -8px -8px 16px #ffffff;

4. Colored Glow

Great for buttons and interactive elements.

box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);

5. Layered Depth

Multiple shadows create realistic depth.

box-shadow:
  0 1px 1px rgba(0,0,0,0.08),
  0 2px 2px rgba(0,0,0,0.06),
  0 4px 4px rgba(0,0,0,0.04),
  0 8px 8px rgba(0,0,0,0.02);

Hover Transitions

Animate shadows for interactive feedback:

.card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition: box-shadow 0.2s ease;
}
.card:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

Performance Tips

1. Avoid animating box-shadow directly on many elements - it triggers repaints

2. Use will-change: box-shadow sparingly for frequently animated elements

3. Prefer filter: drop-shadow() for non-rectangular shapes

4. Limit to 2-3 shadow layers - more layers = more rendering cost

5. Use CSS variables for consistent shadow systems across your app

Dark Mode Shadows

Shadows on dark backgrounds need different treatment:

/* Light mode */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

/* Dark mode - use darker bg or subtle glow */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
/* or a subtle colored glow */
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);

Tools for Shadow Design

• Box Shadow Generator - visually design and preview shadows
• Gradient Generator - pair shadows with gradient backgrounds
• Color Picker - find the perfect shadow colors
• Color Contrast Checker - ensure accessible shadow/background combos