CSS drop-shadow() Filter

Theory & Explanation

drop-shadow() is a CSS filter function that applies a shadow effect to the rendered image, shape, or element, including its alpha (transparency) channel. Unlike box-shadow, which is applied to the element's box, drop-shadow() follows the visible shape, making it ideal for images with transparency, SVGs, and icons.

• Syntax: filter: drop-shadow(h-offset v-offset blur color);
• h-offset: Horizontal shadow position (required)
• v-offset: Vertical shadow position (required)
• blur: Blur radius (optional, default: 0)
• color: Shadow color (optional, default: black)

Key differences from box-shadow:

• drop-shadow() works on the rendered shape (including transparency), not just the box.
• It is used via the filter property, not as a standalone property.
• Multiple drop-shadow() filters can be chained for layered effects.
• Great for PNGs, SVGs, icons, and non-rectangular images.

Use drop-shadow() to create realistic shadows for images, icons, and custom shapes, especially when transparency is involved. Experiment with color and blur for creative effects. For UI elements like cards or buttons, box-shadow is usually preferred.