There’s been a lot of talk over the differences between the CSS box-shadow property and the drop-shadow filter. Both has some advantages and disadvantages which we will see in this post
Box Shadow
You probably have seen and used the box-shadow before, it’s a cool feature and adds a shadow to our “box.
It works like this:
.box-shadow {
box-shadow: 0 0 10px #000;
}
Output:
Drop Shadow
Then there is a CSS Filter which is amazing when it comes to contouring a PNG!
It works like this:
.drop-shadow {
filter: drop-shadow( 0 0 10px rgba(0, 0, 0, 0.5)):
}
Output:
How To Decide?
Box shadow doesn’t work well with transparent images but drop shadow does.
Conclusion
So which do you use? So there are few simple rules:
rules: If your element is solid and has a solid border (with or without border radius), use box-shadow. It has better support, and will provide the same visual result as the drop-shadow filter.
If you have a PNG image then use the drop-shadow filter.
Wrap Up
When you work with transparent images you can use `drop-shadow) filter function to create a shadow on the image’s content, instead of the box-shadow property which creates a rectangular shadow behind an element’s entire box.