10 CSS Box Shadow Examples Every Developer Should Know

Understanding the box-shadow Syntax

Before diving into examples, let's lock down the syntax. Every box-shadow value follows this pattern:

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

/* Multiple shadows are comma-separated */
box-shadow: shadow1, shadow2, shadow3;

• offset-x / offset-y - horizontal and vertical displacement (can be negative)
• blur-radius - how soft/diffuse the shadow is (0 = hard edge)
• spread-radius - expands (+) or contracts (−) the shadow before blurring
• inset - renders the shadow inside the element rather than outside

1. Basic Drop Shadow

The workhorse of UI design. A simple offset shadow lifts an element off the page and creates an immediate sense of hierarchy.

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

2. Layered Multiple Shadows

Stacking several shadows with different blur radii produces a far more natural, physically accurate result. This is the secret behind polished design systems.

/* Five-layer natural shadow */
.card-deep {
  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),
    0 16px 32px rgba(0, 0, 0, 0.07);
}

3. Inner Shadow (Inset)

The inset keyword flips the shadow inside the element, perfect for pressed-button states, input wells, or embossed UI elements.

/* Pressed / input well effect */
.input-field {
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Combining outer + inner */
.embossed {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.15),
    inset 0 1px 2px rgba(255, 255, 255, 0.6);
}

4. Colored Shadows

Replacing black with a hue creates vivid, branded shadows that make colored buttons and cards feel especially vibrant. Use low opacity to keep it tasteful.

.btn-indigo {
  background: #6366f1;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.5);
}

.btn-pink {
  background: #ec4899;
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.5);
}

.btn-emerald {
  background: #10b981;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.5);
}

5. Material Design Elevation Shadows

Google's Material Design defines a precise elevation scale using paired shadows (key light + ambient light). Here are the most useful levels:

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

/* Elevation 2 - hovered card */
.elevation-2 {
  box-shadow:
    0 3px 6px rgba(0,0,0,0.15),
    0 2px 4px rgba(0,0,0,0.12);
}

/* Elevation 3 - dialogs / drawers */
.elevation-3 {
  box-shadow:
    0 10px 20px rgba(0,0,0,0.15),
    0 3px 6px rgba(0,0,0,0.10);
}

/* Elevation 4 - modals */
.elevation-4 {
  box-shadow:
    0 15px 25px rgba(0,0,0,0.15),
    0 5px 10px rgba(0,0,0,0.05);
}

/* Elevation 5 - highest priority */
.elevation-5 {
  box-shadow:
    0 20px 40px rgba(0,0,0,0.2);
}

6. Neumorphism Effect

Neumorphism (soft UI) uses two shadows - one light, one dark - cast in opposite directions to simulate physical extrusion from the background. The background color of the element must match the page background.

/* Page background: #e0e5ec */
.neumorphic {
  background: #e0e5ec;
  border-radius: 16px;
  box-shadow:
     9px  9px 16px #b8bec7,  /* dark shadow */
    -9px -9px 16px #ffffff;  /* light shadow */
}

/* Pressed / active state */
.neumorphic:active {
  box-shadow:
    inset  5px  5px 10px #b8bec7,
    inset -5px -5px 10px #ffffff;
}

7. Glow Effect

A glow is simply a zero-offset, high-spread colored shadow. It works beautifully on dark backgrounds for interactive elements, notifications, or hero CTAs.

/* Cyan glow */
.glow-cyan {
  background: #22d3ee;
  box-shadow: 0 0 20px 6px rgba(34, 211, 238, 0.6);
}

/* Purple glow */
.glow-purple {
  background: #a855f7;
  box-shadow: 0 0 30px 8px rgba(168, 85, 247, 0.55);
}

/* Pulsing glow animation */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 10px 2px rgba(99,102,241,0.4); }
  50%       { box-shadow: 0 0 25px 8px rgba(99,102,241,0.7); }
}
.glow-animated {
  animation: pulse-glow 2s ease-in-out infinite;
}

8. Hard / Cut-Out Shadow

Set blur to 0 for a completely sharp shadow. Popular in retro design, brutalist UI, and comic-book-style components.

.brutalist-card {
  background: #fde047;
  border: 2px solid #111827;
  border-radius: 12px;
  box-shadow: 6px 6px 0 #111827; /* no blur! */
}

.brutalist-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 #111827;
}

9. Text Shadow

text-shadow shares a similar syntax (minus spread-radius) and adds depth or legibility to headings. For SVG icons and irregular shapes, use filter: drop-shadow() instead - it respects the actual alpha channel.

/* Basic text shadow */
h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Glowing text */
.glow-text {
  color: #fff;
  text-shadow:
    0 0 10px rgba(99, 102, 241, 0.8),
    0 0 20px rgba(99, 102, 241, 0.5),
    0 0 40px rgba(99, 102, 241, 0.3);
}

/* SVG / irregular shape - use filter instead */
.icon {
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.4));
}

10. Hover Transition Shadow

Animating between two shadow states on hover communicates interactivity and provides delightful feedback. Always pair with a subtle transform for maximum effect.

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

.interactive-card:hover {
  box-shadow:
    0 14px 28px rgba(0,0,0,0.25),
    0  5px 10px rgba(0,0,0,0.22);
  transform: translateY(-4px);
}