drop-shadow vs box-shadow in CSS — Which to Use and When

box-shadow renders a shadow behind the CSS box (rectangle) of the element. filter: drop-shadow() renders a shadow that follows the actual painted shape — including transparent areas in images and irregular SVG paths.

Use the Box Shadow Generator to preview shadows interactively.

The core difference

/* box-shadow: shadow of the rectangular box */
.box {
  box-shadow: 4px 4px 12px rgba(0,0,0,0.3);
  /* Always rectangular, ignores transparent areas */
}

/* filter: drop-shadow: shadow of the visible pixels */
.shape {
  filter: drop-shadow(4px 4px 12px rgba(0,0,0,0.3));
  /* Follows PNG transparency, SVG paths, clip-path shapes */
}

When box-shadow fails on transparent images

<img src="logo.png" class="logo" />
<!-- logo.png has transparent background -->

/* WRONG: shadow appears behind the full image rectangle */
.logo {
  box-shadow: 4px 4px 12px rgba(0,0,0,0.3);
}

/* RIGHT: shadow follows the actual logo shape */
.logo {
  filter: drop-shadow(4px 4px 12px rgba(0,0,0,0.3));
}

Syntax comparison

/* box-shadow syntax:
   box-shadow: offsetX offsetY blurRadius spreadRadius color; */
box-shadow: 4px 4px 12px 0px rgba(0,0,0,0.25);

/* Multiple shadows (box-shadow only): */
box-shadow:
  0 2px 4px rgba(0,0,0,0.1),
  0 8px 16px rgba(0,0,0,0.1);

/* filter: drop-shadow syntax:
   filter: drop-shadow(offsetX offsetY blurRadius color); */
/* Note: NO spread radius! */
filter: drop-shadow(4px 4px 12px rgba(0,0,0,0.25));

/* Multiple drop-shadows: */
filter:
  drop-shadow(0 2px 4px rgba(0,0,0,0.1))
  drop-shadow(0 8px 16px rgba(0,0,0,0.1));

drop-shadow with SVG and clip-path

/* SVG icon with drop-shadow follows path shape: */
.icon svg {
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.4));
}

/* Custom polygon: */
.diamond {
  width: 100px;
  height: 100px;
  background: #6a9bf4;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  
  /* box-shadow won't follow the diamond shape */
  /* filter: drop-shadow will */
  filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3));
}

inset shadow — box-shadow only

/* Only box-shadow supports inset: */
.input {
  box-shadow: inset 2px 2px 6px rgba(0,0,0,0.15);
}

/* filter: drop-shadow has no inset equivalent */

Performance differences

filter: drop-shadow() is more expensive than box-shadow:

• box-shadow is composited on the GPU in most cases
• filter triggers a “paint” layer and can cause repaints

/* For animated shadows, prefer box-shadow: */
.card {
  transition: box-shadow 0.2s ease;
}
.card:hover {
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}

/* Avoid animating filter: drop-shadow on complex elements */
/* If you must, promote to its own layer: */
.animated-icon {
  will-change: filter;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));
  transition: filter 0.2s ease;
}

spread radius — box-shadow only

/* box-shadow's 4th value is spread: grows or shrinks the shadow */
.glow {
  box-shadow: 0 0 0 8px rgba(100, 149, 237, 0.4);
  /* spread=8px: creates a glow ring without blur */
}

/* Colored focus ring: */
.input:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

/* filter: drop-shadow has no spread radius */

When to use which

Related tools

• Box Shadow Generator — generate and preview CSS shadows
• CSS Box Shadow Guide — box-shadow syntax reference
• CSS Shadow Animation — animating shadows on hover/click