The drop-shadow() filter adds a shadow that follows the shape of an element.
Unlike box-shadow, which adds a rectangular shadow around the box,
drop-shadow respects transparent areas. This makes it perfect for images with
transparent backgrounds or elements with irregular shapes.
Basic Syntax
The syntax is similar to box-shadow: offset-x, offset-y, blur radius, and
optional color. The shadow appears behind the element, following its silhouette.
.shadowed {
filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.3));
}
The first value is horizontal offset, the second is vertical offset, the third is blur, and the last is color. Positive x moves right, positive y moves down.
Try it Yourself →Why Not Just Use box-shadow?
Great question. box-shadow creates a shadow around the rectangular box of an
element. If you have a PNG image with a transparent background, box-shadow
will add a shadow around the rectangle, not the actual shape of the image.
/* This shadows the rectangle */
.icon-box {
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}
/* This shadows the actual shape */
.icon-shadow {
filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.3));
}
For a star-shaped image, drop-shadow creates a star-shaped shadow. For a
circle, it creates a circular shadow. This is the key difference.
Practical Use Cases
Drop shadows shine with SVG icons, transparent PNGs, and elements with
clip-path or border-radius. Anytime the element shape is not a
simple rectangle, drop-shadow gives you a more realistic shadow.
.rounded-icon {
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
.cutout-shape {
filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.4));
}
You can also chain multiple drop-shadows for more complex effects, though be aware that this can impact performance with many elements.