Is it a good idea to use CSS drop-shadow in place of box-shadow?

View other answers to this thread
Start a personal dev blog on your domain for free and grow your readership.

3.4K+ developers have started their personal blogs on Hashnode in the last one month.

Write in Markdown ยท Publish articles on custom domain ยท Gain readership on day zero ยท Automatic GitHub backup and more

Alkshendra Maurya's photo

TL;DR:

If you're able to achieve the desired results and if the support is not a problem then.. yes, drop-shadow is a good choice.


Long version

If you're able to achieve the desired results and if the support is not a problem then.. yes, drop-shadow is a good choice.

But for a generic implementation, I'd say it all depends.

There're a few differences between both the properties, drop-shadow() is borrowed from SVG filters and packs some(cool) things that you could only do with SVGs before, which, depending on your requirement, may be helpful or maybe not.

Here are some points of differences between both

Respect for outlines : drop-shadow() respects the outlines of an element and would only add shadow to the part with solid areas not to the whole element box.

What this means is, you would be able to put shadows to things like png images and it would only affect the actual image part and not the transparent areas which is not the case with box-shadow.

Consideration for psuedo elements : While in box-shadow property, psuedo elements like :before and :after are not considered and do not get shadows, this is not the case with drop-shadow and any psuedo elements in your element would be considered while putting the shadow.

lack of spread-radius :

Here's the typical box-shadow syntax:

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color

which translates to something like this in implementation:

box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

notice the spread-radius? it defines how spread out your shadows will be.

This is one part where drop-shadow lags behind. There's no support for spread in the current implementation.

Performance : In terms of performance CSS filter has the advantage of hardware acceleration so the drop-shadow filter will always render faster as compared to box-shadow. This means your animations would always be fast smooth.

To conclude, I'd say if you are able to achieve the desired results using drop-shadow, there's no argument against it.

Hope it helps! ๐Ÿ˜Š