CSS Box Shadow Generator — Build Drop Shadows and Inset Effects

CSS box-shadow adds depth and dimension to elements. A well-crafted shadow makes UI components feel tangible. The property takes up to six values, and understanding each parameter gives you full control over shadow style — from subtle elevation to dramatic effects.

Use the Box Shadow Generator to build and preview box shadow effects visually.

Syntax

box-shadow: offset-x offset-y blur-radius spread-radius color;
box-shadow: inset offset-x offset-y blur-radius spread-radius color;

Basic shadows

Minimal drop shadow

/* Simple soft shadow below the element: */
.card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Medium elevation shadow

/* Card-style shadow: */
.card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Sharp shadow (no blur)

/* Solid, comic book style: */
.element {
  box-shadow: 4px 4px 0 #000;
}

Glow effect

/* Blue glow (no offset, large spread): */
.button:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

/* Red error glow: */
.input-error {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.4);
}

Inner shadow (inset)

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

/* Inner border effect: */
.input:focus {
  box-shadow: inset 0 0 0 2px #3b82f6;
}

Material Design elevation levels

Material Design uses shadows to convey elevation. Each level has a specific shadow:

/* Elevation 0: flat, no shadow */
.elevation-0 { box-shadow: none; }

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

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

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

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

Multiple shadows

box-shadow accepts a comma-separated list. They’re rendered front-to-back (first shadow on top):

/* Two-layer shadow (more natural look): */
.card {
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Triple shadow for strong elevation: */
.modal {
  box-shadow: 
    0 1px 3px rgba(0,0,0,0.1),
    0 4px 12px rgba(0,0,0,0.1),
    0 16px 48px rgba(0,0,0,0.12);
}

/* Spread glow + drop shadow: */
.primary-button {
  box-shadow:
    0 0 0 2px rgba(59, 130, 246, 0.3),  /* Ring */
    0 4px 12px rgba(59, 130, 246, 0.4); /* Drop shadow */
}

Shadow with hover transition

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

.card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);  /* Lift effect */
}

The transform: translateY(-2px) combined with an increased shadow creates a realistic “lifting” interaction.

Colored shadows

/* Brand-colored shadow: */
.brand-card {
  background: #3b82f6;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
}

/* Neon glow effect: */
.neon {
  color: #22d3ee;
  box-shadow: 
    0 0 10px #22d3ee,
    0 0 20px #22d3ee,
    0 0 40px #22d3ee;
}

/* Sunset gradient shadow: */
.sunset {
  box-shadow: 0 8px 32px rgba(251, 113, 133, 0.5);
}

Spread radius tricks

The spread radius expands the shadow before blurring:

/* No blur, just spread: creates a border effect */
.bordered {
  box-shadow: 0 0 0 3px #3b82f6;  /* 3px "border" using shadow */
}

/* Useful for focus rings (accessible): */
.focusable:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

/* Negative spread (shrinks shadow): */
.subtle {
  box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.3);
  /* -4px spread makes shadow fit under the element */
}

Performance considerations

box-shadow can cause repaints when animated. CSS is generally GPU-accelerated for opacity and transform, but shadows trigger layout recalculation on some browsers.

Best practice: Animate opacity/transform instead of box-shadow when possible:

/* Less performant: animating box-shadow directly */
.card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s;
}

/* More performant: use a pseudo-element for the shadow */
.card {
  position: relative;
}

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity 0.3s;  /* opacity is GPU-accelerated */
}

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

Dark mode shadows

Shadows on dark backgrounds are less visible — dark shadows blend in. Use lighter or colored shadows:

@media (prefers-color-scheme: dark) {
  .card {
    /* Standard dark shadow becomes invisible on dark bg: */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);  /* Increase opacity */
    
    /* Or use subtle highlight instead: */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
}

Related tools

• Box Shadow Generator — build shadows visually
• CSS Box Shadow Examples — shadow effect examples
• CSS Box Shadow Guide — comprehensive reference