CSS Box Shadow Techniques and Best Practices

Box shadows are one of the most impactful CSS properties for adding depth and visual hierarchy to your UI. But they're often misused or underutilized.

Syntax

box-shadow: [inset]     ;

Parameters

offset-x — horizontal offset. Positive = right, negative = left.

offset-y — vertical offset. Positive = down, negative = up.

blur-radius — how soft the shadow is. 0 = sharp edge.

spread-radius — how much the shadow expands/contracts.

inset — makes the shadow appear inside the element.

Practical Patterns

Subtle Elevation (Card)

.card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
}

Medium Elevation (Dropdown)

.dropdown {
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}

High Elevation (Modal)

.modal {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
}

Glow Effect

.glow {
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.5);
}

Ring/Outline (Accessible Focus)

.focus-ring {
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}

Multiple Shadows

Stack multiple shadows for realistic depth. Layered shadows look more natural than a single heavy shadow:

.layered {
  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);
}

Performance

Box shadows trigger compositing but not layout. They're GPU-accelerated in modern browsers. However, very large blur radii or many stacked shadows on scroll-heavy pages can cause jank. Use will-change: transform to promote the element to its own compositing layer if needed.

Dark Mode Considerations

On dark backgrounds, rgba(0,0,0) shadows are invisible. Use lighter shadows or glows:

[data-theme="dark"] .card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
}

Try It

Use our Box Shadow Generator to visually create single or multi-layer shadows, adjust parameters with sliders, and copy the CSS.

Conclusion

Good shadows add depth without being obvious. Use layered, subtle shadows for cards; stronger shadows for floating elements. Always consider dark mode.