CSS Box Shadow Guide: Create Beautiful Shadows Like a Pro

Box shadows add depth, dimension, and visual hierarchy to any design. The CSS is simple but mastering the art requires understanding the four parameters: offset X, offset Y, blur, and spread.

The Syntax

box-shadow: h-offset v-offset blur spread color;

h-offset: Horizontal shadow position (positive = right, negative = left)
v-offset: Vertical shadow position (positive = down, negative = up)
blur: How soft the shadow is (higher = softer, 0 = sharp)
spread: Shadow size (positive = larger, negative = smaller)
color: Shadow color (use rgba for transparency)

Try the Box Shadow Generator →

Presets That Look Great

/* Subtle card shadow */
box-shadow: 0 2px 8px rgba(0,0,0,0.1);

/* Elevated card */
box-shadow: 0 4px 16px rgba(0,0,0,0.12);

/* Modal / dialog */
box-shadow: 0 8px 32px rgba(0,0,0,0.18);

/* Material Design elevation 2 */
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

Design rule: The more elevated an element appears, the more shadow it needs. Cards get subtle shadows. Modals get heavy shadows. Buttons get none or very light shadows.

Multiple Shadows

You can stack shadows for more realistic effects:

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

Performance Note

Box shadows trigger GPU compositing on most modern browsers, which is generally fast. However, large blur values or many shadows on a page can impact rendering performance. Keep blur under 30px for best results.

Bottom Line

Start with a subtle shadow (0 2px 8px rgba(0,0,0,0.1)) and increase as needed. Use our box shadow generator to visually preview before committing to code.