The Difference Between box-shadow and drop-shadow

The shadow filter has advantages over the box-shadow property.

First, when the drop-shadow filter is rendered in the browser, it uses hardware acceleration, which improves performance. However, there is no additional acceleration when you use the box-shadow property in the browser.

Secondly, the drop-shadow filter is applied to the opaque outline of the images, while the transparent areas are ignored. On the other hand, the box-shadow sets a rectangular shadow around the border of the entire image.

Based on the example semi-transparent PNG image, you can see how these two properties work. But if you assign an opaque background to such an image, you can see how the filter behavior changes.

It should be noted that filters were borrowed into CSS from SVG, so drop-shadow and box-shadow are different in their implementations. That is, the shadows look different given the same parameters.

Let’s compare the shadow effects using an example.