0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>The shadow filter has advantages over the box-shadow property.</p>
1
<p>The shadow filter has advantages over the box-shadow property.</p>
2
<p>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.</p>
2
<p>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.</p>
3
<p>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.</p>
3
<p>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.</p>
4
<p>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.</p>
4
<p>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.</p>
5
<p>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.</p>
5
<p>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.</p>
6
<p>Let’s compare the shadow effects using an example.</p>
6
<p>Let’s compare the shadow effects using an example.</p>