Question 1

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

Accepted Answer

box-shadow shadows the element's bounding box (rectangle, respects border-radius). filter: drop-shadow() shadows the element's actual visible shape — it follows transparent areas in PNGs, clip-path edges, and irregular geometry. Use box-shadow for cards and buttons; use drop-shadow for shadows on logos, icons, and clipped shapes.

Question 2

How do I add a drop shadow to a PNG image?

Accepted Answer

Apply filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.4)) to the img element. Unlike box-shadow, drop-shadow follows the transparent areas of the PNG, casting a shadow only where actual pixels exist. The generator above produces the exact filter syntax.

Question 3

Can I use drop-shadow on text?

Accepted Answer

Yes, but text-shadow is usually a better choice for text — it's purpose-built, performs better, and supports comma-separated stacking. Use filter: drop-shadow() on text only when you need the shadow to follow the actual glyph outline including any text-decoration borders or backgrounds.

Question 4

How do I stack multiple drop shadows?

Accepted Answer

Chain them with spaces in the filter declaration: filter: drop-shadow(0 2px 4px black) drop-shadow(0 8px 16px rgba(0,0,0,0.3)). Each drop-shadow is computed in sequence — the second shadow shadows the result of the first, including its shadow. This produces a richer multi-layer effect than a single shadow.

Question 5

Why is my drop-shadow performance poor?

Accepted Answer

drop-shadow rasterizes the element to compute its shape, which is more expensive than box-shadow. Avoid animating drop-shadow with large blur values on full-screen elements. For animated shadows, use box-shadow if shape doesn't matter, or animate opacity on a pseudo-element with the shadow pre-applied.

Question 6

Does drop-shadow work on clip-path?

Accepted Answer

Yes — and this is its main advantage over box-shadow. drop-shadow follows the clipped shape, casting a shadow that matches whatever polygon, circle or ellipse you've clipped. box-shadow ignores clip-path and shadows the original bounding box. This makes drop-shadow essential for hexagons, stars, speech bubbles and any shape created with clip-path.

Guia Completo de CSS Drop Shadow Filter

Sintaxe

Perguntas Frequentes