Box Shadow vs Drop Shadow in CSS: What Actually Differs

box-shadow and filter: drop-shadow() both draw a shadow behind an element with nearly the same syntax — offset-x, offset-y, blur, and a color. The difference only shows up once you look past a plain rectangle: one shadows the box, the other shadows the actual visible shape.

box-shadow shadows the element's box

box-shadow draws its shadow based on the element's border box — its rectangular bounding shape, including border-radius if set. If you apply box-shadow to a PNG icon with transparent corners, the shadow still renders as a rectangle behind the image, ignoring the transparent parts entirely, since box-shadow doesn't know or care what's actually visible inside the box.

drop-shadow follows the actual rendered shape

filter: drop-shadow() operates on the alpha channel of what's actually rendered — for an image with transparency, it shadows the visible (non-transparent) pixels, not the rectangular frame around them. A star-shaped PNG icon gets a star-shaped shadow with drop-shadow, but a rectangular one with box-shadow, because box-shadow can't see past the box.

Side-by-side comparison

• box-shadow — shadows the rectangular border box; supports inset shadows; supports multiple comma-separated shadows; well-supported and cheap to render.
• drop-shadow — shadows the actual rendered shape (respects transparency); no inset option; can be chained with other filters like blur() or brightness(); slightly more expensive to render, especially on large or animated elements.

A quick way to decide

Ask whether the element you're shadowing is effectively a rectangle (a card, a button, a modal) or has meaningful transparency in its shape (an icon, a logo, cutout artwork). Rectangle → box-shadow. Irregular shape with transparency → drop-shadow. Getting this backwards is the single most common cause of a shadow that looks visibly "off" without an obvious reason why.