The filter: drop-shadow() CSS function adds a shadow to the actual visible shape of an element — not its bounding box. Unlike box-shadow, drop-shadow follows transparent areas of PNGs, the edges of clip-path shapes, and irregular SVG geometry. This makes it the right choice whenever your element isn't a plain rectangle.
filter: drop-shadow(...) with all your layers chained together.This is the most important thing to understand about drop-shadow:
| Property | Shadows | Best For |
|---|---|---|
box-shadow | The element's bounding box (rectangle) | Cards, buttons, panels |
filter: drop-shadow() | The element's actual visible shape | PNGs with transparency, clip-path shapes, SVGs, irregular geometry |
text-shadow | Each glyph individually | Headlines, hero text, neon effects |
/* Subtle elevation — like a floating image */ filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15)); /* Hard offset — comic book / poster style */ filter: drop-shadow(4px 4px 0 #ff6fb0); /* Glow effect — neon pop */ filter: drop-shadow(0 0 8px #7c6fff) drop-shadow(0 0 16px #7c6fff); /* Stacked depth — realistic layered shadow */ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15)) drop-shadow(0 18px 36px rgba(0, 0, 0, 0.1));
When you apply box-shadow to a transparent PNG, the shadow follows the rectangular image bounds — even where the PNG is transparent. drop-shadow follows only the opaque pixels:
img.logo {
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
/* Shadow follows the actual logo shape, not the PNG's bounding box */
}
If you've used clip-path to shape an element (hexagon, star, speech bubble), box-shadow will shadow the original rectangle, ignoring your clip. Use drop-shadow on a parent or use it directly to follow the clipped shape:
.hexagon {
width: 200px; height: 200px;
background: #7c6fff;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
/* box-shadow here would shadow the rectangle, not the hexagon */
}
.hexagon-wrapper {
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
/* Apply to a wrapper to shadow the hexagon shape */
}
Chain drop-shadow filters with spaces to layer them. Each filter applies to the result of the previous one, which means later shadows shadow the earlier shadows too — producing rich multi-level effects:
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)) drop-shadow(0 4px 8px rgba(0,0,0,0.15)) drop-shadow(0 16px 24px rgba(0,0,0,0.1));
drop-shadow is more expensive than box-shadow because the browser must rasterize the element to determine its shape. Tips for keeping it fast:
opacity on a wrapper with the shadow pre-appliedwill-change: filter sparingly and only for elements actively transitioning| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| filter: drop-shadow() | 18+ | 35+ | 9.1+ | 12+ |
| stacked drop-shadow | 18+ | 35+ | 9.1+ | 12+ |
| drop-shadow animation | 53+ | 52+ | 9.1+ | 79+ |
box-shadow shadows the element's bounding box (rectangle, respects border-radius). filter: drop-shadow() shadows the element's actual visible shape — it follows transparent areas in PNGs, clip-path edges, and irregular geometry. Use box-shadow for cards and buttons; use drop-shadow for shadows on logos, icons, and clipped shapes.
Apply filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.4)) to the <img> element. Unlike box-shadow, drop-shadow follows the transparent areas of the PNG, casting a shadow only where actual pixels exist. The generator above produces the exact filter syntax — pick the preset that matches the look you want.
Yes, but text-shadow is usually a better choice for text — it's purpose-built, performs better, and supports comma-separated stacking. Use filter: drop-shadow() on text only when you need the shadow to follow the actual glyph outline including any text-decoration borders, or when the text is inside an element you're already filtering.
Chain them with spaces in the filter declaration: filter: drop-shadow(0 2px 4px black) drop-shadow(0 8px 16px rgba(0,0,0,0.3)). Each drop-shadow is computed in sequence — the second shadow shadows the result of the first, including its shadow. This produces a richer multi-layer effect than a single shadow.
drop-shadow rasterizes the element to compute its shape, which is more expensive than box-shadow. Avoid animating drop-shadow with large blur values on full-screen elements. For animated shadows, use box-shadow if shape doesn't matter, or animate opacity on a pseudo-element with the shadow pre-applied.
Yes — and this is its main advantage over box-shadow. drop-shadow follows the clipped shape, casting a shadow that matches whatever polygon, circle or ellipse you've clipped. box-shadow ignores clip-path and shadows the original bounding box. This makes drop-shadow essential for hexagons, stars, speech bubbles and any shape created with clip-path.
Looking for the bigger picture of CSS filters? See our complete CSS Filter Generator with blur, grayscale, hue-rotate, sepia and more.