CSS Box Shadow: The Complete Guide with Visual Examples

CSS Box Shadow Syntax

The box-shadow property adds shadow effects to elements. The full syntax:

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

Value	Required	Description
inset	No	Makes the shadow inside the element
offset-x	Yes	Horizontal offset (positive = right)
offset-y	Yes	Vertical offset (positive = down)
blur-radius	No	How blurry the shadow is (default: 0)
spread-radius	No	How much the shadow expands (default: 0)
color	No	Shadow color (default: currentColor)

Basic Examples

Simple Drop Shadow

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

Elevated Card

.card-elevated {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

Subtle Bottom Shadow

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

Multiple Shadows

You can stack multiple shadows separated by commas. Shadows are rendered front-to-back (first shadow is on top):

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

This layered approach creates more realistic, natural-looking shadows than a single shadow.

Material Design Elevation

/* Elevation 1 */
.elevation-1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

/* Elevation 2 */
.elevation-2 {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

/* Elevation 3 */
.elevation-3 {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

/* Elevation 4 */
.elevation-4 {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

Inset Shadows

The inset keyword creates shadows inside the element:

/* Inner shadow (pressed/recessed look) */
.input-field {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Combine inset and outset */
.neumorphic {
  box-shadow:
    8px 8px 16px rgba(0, 0, 0, 0.2),
    -8px -8px 16px rgba(255, 255, 255, 0.05),
    inset 1px 1px 2px rgba(255, 255, 255, 0.1);
}

Colored Shadows

Using colored shadows creates a glow effect:

.glow-blue {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.glow-purple {
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.4);
}

/* Neon effect */
.neon {
  box-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #0ff,
    0 0 40px #0ff;
}

Hover Effects

.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

Performance Considerations

1. Use will-change: transform on elements with animated shadows to promote them to their own compositor layer
2. Avoid animating box-shadow directly — it triggers repaint. Instead, animate opacity on a pseudo-element
3. Large blur radii are expensive — Keep blur under 20px for smooth performance
4. Multiple shadows compound the cost — Each shadow is rendered separately

Performance-Optimized Shadow Animation

.card {
  position: relative;
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover::after {
  opacity: 1;
}

Design your shadows visually with our CSS Box Shadow Generator — adjust offsets, blur, spread, and color with real-time preview.

Related Tools

• CSS Box Shadow Generator — Visual shadow designer
• CSS Gradient Generator — Create CSS gradients
• CSS Flexbox Playground — Experiment with Flexbox
• Color Converter — Convert between HEX, RGB, HSL
• Color Contrast Checker — Check accessibility compliance