filter: drop-shadow()

While box-shadow follows the rectangular border box, filter: drop-shadow() traces the actual visible shape of an element — including transparent areas in PNGs, SVGs, and irregular shapes.

Syntax

filter: drop-shadow(offset-x offset-y blur-radius color). Note: no spread-radius and no inset mode.

When to Use drop-shadow vs box-shadow

Scenario	Use
Rectangular element	box-shadow
PNG with transparency	filter: drop-shadow
Inline SVG icon	filter: drop-shadow
Clipped/shaped element	filter: drop-shadow

Example

/* drop-shadow on a transparent PNG — hugs the shape */
.cutout-img {
    filter: drop-shadow(4px 8px 12px rgb(0 0 0 / 0.3));
}

/* Icon shadow that follows the paths */
.icon-svg {
    filter: drop-shadow(2px 2px 4px rgb(0 0 0 / 0.4));
    fill: #1a73e8;
}

/* Floating card with clip-path — only drop-shadow works */
.notch-card {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 90% 100%, 0 100%);
    filter: drop-shadow(0 8px 16px rgb(0 0 0 / 0.2));
    background: #fff;
    padding: 2rem;
}

/* Coloured glow on an SVG logo */
.logo {
    filter:
        drop-shadow(0 0 8px rgb(26 115 232 / 0.7))
        drop-shadow(0 0 24px rgb(26 115 232 / 0.4));
}

CSS

Full Editor

Pro Tip

Use filter: drop-shadow() on transparent PNGs and SVGs where you want the shadow to follow the actual image shape — box-shadow always shadows the rectangular bounding box, regardless of transparency.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned