What is CSS filter: drop-shadow()?
The CSS filter: drop-shadow() function applies a drop shadow to the visual rendering of an element — meaning it follows the actual visible shape, including transparency. It is part of the CSS Filter Effects specification and is applied via the filter property.
Unlike box-shadow, which always casts a rectangular shadow matching the element's bounding box, drop-shadow understands alpha transparency. A PNG icon of a star will get a star-shaped shadow, not a square shadow. An SVG with a complex path will get a shadow that follows every curve.
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));drop-shadow vs. box-shadow: What's the Difference?
This is the question most developers have when they first encounter drop-shadow. The names sound similar, but they behave very differently:
| Aspect | box-shadow | filter: drop-shadow() |
|---|---|---|
| Follows element shape | No (bounding box only) | Yes (alpha-aware) |
| Works on transparent PNGs | No | Yes |
| Works on SVG paths | No | Yes |
| Spread radius | Yes | No |
| Inset shadows | Yes | No |
| Multiple layers | Yes (comma-separated) | Yes (chain filters) |
Choose box-shadow for interface components like cards, buttons, modals, and input fields. Choose drop-shadow for transparent assets: icons, SVG logos, product PNGs on white backgrounds, and decorative illustrations.
Syntax Explained
The drop-shadow() function takes the same first three parameters as box-shadow, but without spread-radius or the inset keyword:
filter: drop-shadow(<offset-x> <offset-y> [blur-radius] [color]);To stack multiple drop-shadows, you chain multiple filter functions rather than using a comma-separated list:
filter: drop-shadow(2px 2px 4px blue) drop-shadow(4px 4px 8px purple);Best Use Cases for drop-shadow
- Product images on white backgrounds. An e-commerce product photo against a white background will get a clean, shape-fitting shadow that makes it look naturally placed on the page.
- SVG icons and logos. Navigation icons, social media logos, and brand marks in SVG format receive shadows that follow every path curve rather than a rectangle around them.
- Custom-shaped PNG decorations. Design elements like illustrated characters, stickers, or cutout assets look grounded with a drop-shadow rather than floating with a box-shadow.
- Glowing effects on icons. A colored drop-shadow with a large blur radius creates a bloom/glow effect that closely hugs the icon shape, which is impossible to achieve with box-shadow alone.
- Map markers and UI overlays. Custom map pins and floating UI elements that have irregular shapes benefit enormously from shape-aware shadows.
Performance Considerations
CSS filters, including drop-shadow, are applied by the GPU in most browsers and are generally performant for static elements. There are a few things to watch out for:
- Filters create a new stacking context. Applying a filter to a parent element promotes it to a new stacking context, which can cause
position: fixedchildren to behave unexpectedly. - Animating filters is costly. Transitioning filter values causes browser repaints. Prefer transitioning
opacitycombined with a static filter for best performance on mobile. - Very large blur radii on complex SVGs. Blurring a highly detailed SVG path with a large radius is computationally expensive. Test on mid-range mobile devices.
Frequently Asked Questions
Can I use drop-shadow on a <div>?
Yes, but it behaves the same as box-shadow for a solid-colored div with no transparency. The difference only becomes visible when the element or its contents have transparent pixels. Use box-shadow for solid-background elements; it gives you more control with the spread-radius parameter.
Why does drop-shadow have no spread radius?
The CSS Filter Effects specification omits a spread value because computing an outward expansion of an arbitrary alpha shape is significantly more complex than expanding a rectangle. There is an SVG filter primitive approach that can approximate this, but the CSS shorthand does not include it.
Does drop-shadow work with border-radius?
Yes. If an element has a solid background and rounded corners, a drop-shadow will follow those rounded corners, just like box-shadow. For elements with actual transparent pixels beyond the border-radius, drop-shadow will follow those pixel edges precisely.
Can I combine filter: drop-shadow with other CSS filters?
Absolutely. The filter property accepts multiple filter functions in a space-separated list, and they are applied in order. For example, filter: brightness(1.1) drop-shadow(0 4px 8px black) first boosts brightness, then applies the shadow to the brightened result.