filter: drop-shadow()

A shadow that knows the shape

Caveatdrop-shadow() exists because box-shadow shades the box: a star, a speech-bubble tail or a transparent PNG casts a rectangle, or — under clip-path — nothing at all, since the shadow is part of the element’s own paint and the clip cuts it off with everything else. The trap is assuming the filter escapes the same knife. It does not: on one element the clip is applied to the filtered result, so the left star’s shadow dies exactly like a box-shadow would. The pattern that works is one element up — clip the child, filter the parent, and the parent shades whatever shape survived. Smaller print: no spread argument, no inset, the same blur number paints a visibly softer and wider halo than box-shadow’s — retune the value, do not copy it — and a filter makes the element a containing block, so a position: fixed descendant stops meaning the viewport.

FallbackAn engine without filters drops the declaration and the shape simply casts nothing — decorative loss, nothing broken, which is the definition of shippable. The direction worth re-checking is the old one: a leftover box-shadow under a fresh clip-path fails silently in every engine, and looks exactly like a shadow someone forgot to write.

/* clip the child … */
.star { clip-path: polygon(…); }

/* … filter the parent: on the
   same element the clip cuts
   the shadow off too */
.star-wrap {
  filter:
    drop-shadow(0 7px 6px #0009);
}

Published 10 Sep 2026