Drop Shadow

Definition

Utilities for applying a drop-shadow CSS filter, which perfectly traces the exact alpha transparency shape of an element, rather than just casting a square shadow from its bounding box.

Explain Like I'm New

If you have a PNG image of a Star with a transparent background, and you apply `shadow-md` (Box Shadow), it will put a big ugly square shadow around the invisible borders of the image file. If you apply `drop-shadow-md`, it will cast a shadow that perfectly traces the exact shape of the Star.

Real World Example

Giving a drop shadow to an SVG logo or a complex shaped transparent PNG.

Common Use Cases

•SVGs
•Transparent PNGs

Interactive Example

Interview Questions

basic

What is the difference between `shadow` and `drop-shadow`?

intermediate

Is `drop-shadow` more or less performant for the browser to render than `shadow`?

Flash Cards

Question

shadow vs drop-shadow?

Click to reveal answer

Answer

`shadow` draws a shadow from the physical rectangular box of the HTML element. `drop-shadow` acts like a light source, casting a shadow only from the non-transparent pixels inside the element.

Question

Performance?

Click to reveal answer

Answer

Significantly LESS performant. `drop-shadow` is a CSS Filter that forces the browser to analyze pixel transparency. Use it sparingly on images/SVGs, never on standard rectangular `divs`.