CSS filter property has a neat filter called drop-shadow() which lets you specify the shadow for an element(pretty much the same as the box-shadow).
Since the same results can be achieved with both the properties, Is it a good idea to favor using CSS drop-shadow() in place of box-shadow?
No. The CSS box-shadow property has better browser support than filter. Take a look at both http://caniuse.com/#search=box-shadow and http://caniuse.com/#search=filter.
I recommend using box-shadow instead of drop-shadow().
At this point, NO.
CSS box-shadow, has a better browsers coverage than filters. You can check http://caniuse.com
Grey Davis
Frontend and other stuff
Alkshendra Maurya
Frontend Engineer | Hashnode Alumnus
TL;DR:
If you're able to achieve the desired results and if the support is not a problem then.. yes,
drop-shadowis 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
:beforeand:afterare 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 | colorwhich 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
filterhas 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! ๐