Intermediate10 min read

CSS Box Shadow: Creating Depth and Visual Hierarchy

10 min read
255 words
18 sections15 code blocks

What is box-shadow?

The box-shadow property adds shadow effects around an element's frame. Shadows create the illusion of depth and help establish visual hierarchy — making elements appear to float above or sink below the page surface.

Box Shadow Syntax

CSS
/* box-shadow: offset-x offset-y blur spread color */
.card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

The Five Values

  1. offset-x: Horizontal displacement (positive = right, negative = left)
  2. offset-y: Vertical displacement (positive = down, negative = up)
  3. blur-radius: How blurry the shadow is (optional, default 0 = sharp)
  4. spread-radius: How much the shadow expands or contracts (optional, default 0)
  5. color: Shadow color (optional, defaults to text color)
CSS
/* Only offset (sharp shadow) */
.sharp { box-shadow: 5px 5px black; }

/* With blur */
.soft { box-shadow: 5px 5px 10px rgba(0,0,0,0.2); }

/* With blur and spread */
.expanded { box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.2); }

Shadow Examples by Intensity

CSS
/* Subtle - cards, inputs */
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* Default - general purpose */
.shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06); }

/* Medium - dropdowns, popovers */
.shadow-md { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

/* Large - modals, floating elements */
.shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05); }

/* Extra large - high-elevation elements */
.shadow-xl { box-shadow: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04); }

Inset Shadows

Adding the inset keyword creates an inner shadow that appears inside the element:

CSS
/* Inner shadow */
.inset-shadow {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}

/* Pressed button effect */
.button:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Input field inner glow */
.input:focus {
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),
              0 0 0 3px rgba(52, 152, 219, 0.25);
}

Multiple Shadows

Combine multiple shadows separated by commas for more realistic effects:

CSS
/* Material Design-inspired shadow */
.card {
  box-shadow:
    0 1px 3px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.24);
}

/* Elevated card */
.card-elevated {
  box-shadow:
    0 14px 28px rgba(0,0,0,0.1),
    0 10px 10px rgba(0,0,0,0.08);
}

/* Layered depth effect */
.deep-shadow {
  box-shadow:
    0 2px 1px rgba(0,0,0,0.09),
    0 4px 2px rgba(0,0,0,0.09),
    0 8px 4px rgba(0,0,0,0.09),
    0 16px 8px rgba(0,0,0,0.09),
    0 32px 16px rgba(0,0,0,0.09);
}

Shadow Tricks

Focus Ring

CSS
.button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.5);
}

The trick: using 0 blur with spread creates a solid ring around the element.

Colored Glow

CSS
.glow-blue {
  box-shadow: 0 0 20px rgba(52, 152, 219, 0.5);
}

.glow-green {
  box-shadow: 0 0 20px rgba(39, 174, 96, 0.4);
}

.neon-glow {
  box-shadow:
    0 0 10px #3498db,
    0 0 20px #3498db,
    0 0 40px #3498db;
}

Bottom-Only Shadow

CSS
.bottom-shadow {
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  /* Negative spread pulls sides in, leaving only bottom shadow */
}

Animated Shadows

Shadows can be animated with transitions for interactive effects:

CSS
.card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.12);
  transform: translateY(-4px);
}

Performance tip: Animating box-shadow can be expensive. For better performance, consider using a pseudo-element for the shadow and animating its opacity instead:

CSS
.card {
  position: relative;
}

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 14px 28px rgba(0,0,0,0.15);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

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

Practical Shadow Patterns

CSS
.navbar {
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
CSS
.dropdown {
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  border-radius: 8px;
}
CSS
.modal {
  box-shadow: 0 25px 50px rgba(0,0,0,0.25);
  border-radius: 12px;
}

Floating Action Button

CSS
.fab {
  box-shadow:
    0 3px 5px rgba(0,0,0,0.2),
    0 6px 10px rgba(0,0,0,0.14);
  border-radius: 50%;
}

.fab:hover {
  box-shadow:
    0 5px 8px rgba(0,0,0,0.2),
    0 8px 15px rgba(0,0,0,0.14);
}

Removing Shadows

CSS
.no-shadow { box-shadow: none; }

Summary

box-shadow creates depth and visual hierarchy in your designs. Use subtle shadows for cards and inputs, medium shadows for dropdowns and popovers, and large shadows for modals and overlays. Combine multiple shadows for realistic effects, use inset for pressed states, and spread with zero blur for focus rings. Always animate shadows with transitions for smooth interactive feedback.