drop-shadow vs box-shadow

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:

box-shadow

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:

drop-shadow

How To Decide?

Box shadow doesn’t work well with transparent images but drop shadow does.

Decide

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.


Leave a Reply

Your email address will not be published.

Recent post

Redux to a Next JS App
Redux to a Next JS App
  • July 16, 2021
How to Create Objects In JavaScript
How to Create Objects In JavaScript?
  • June 29, 2021
HTML forms
HTML Forms
  • June 23, 2021
Need a successful project?

Lets Work Together

Estimate Project
  • right image
  • Left Image