DEV Community

Cover image for Box shadow vs. drop shadow in CSS
Shuvo
Shuvo

Posted on

Box shadow vs. drop shadow in CSS

We all know that we can use box-shadow to add shadows to our HTML elements. eg

.box{
    box-shadow: 2px 3px 10px rgba(0, 0, 0, .5);
}
Enter fullscreen mode Exit fullscreen mode

CSS box shadow

But did you know that we can achieve the same using drop-shadow filter. You simply have to pass the shadow value in the drop-shadow function

.box{
    filter: drop-shadow(2px 3px 10px rgba(0, 0, 0, .5));
}
Enter fullscreen mode Exit fullscreen mode

CSS drop shadow filter

Although in this example both box-shadow and drop-shadow does the same thing. But if we were to add box-shadow on a PNG image you will see the shape of box-shadow is rectangular/box.

img{
  box-shadow: 2px 3px 10px rgba(0, 0, 0, .5);
}
Enter fullscreen mode Exit fullscreen mode

CSS box shadow on png image
While if we add drop-shadow to a PNG, the shape of the shadow will be same as the shape of the visible area of the PNG.

img{
    filter: drop-shadow(2px 3px 10px rgba(0, 0, 0, .5));
}
Enter fullscreen mode Exit fullscreen mode

CSS drop shadow filter on png image

Make sure you checkout my other articles and YouTube channel

0shuvo0 image




Was it helpful? Support me on Patreon

Patreon Logo

Discussion (21)

Collapse
boyney profile image
Boyne

I didn’t even know drop shadows existed until now

Collapse
0shuvo0 profile image
Shuvo Author

Hope you have a lot of fun with it

Collapse
baenencalin profile image
Calin Baenen

If I recall correctly, being rectangle/conforming to visible shape also applies to text, and other things with possible transparency, doesn't it?

Collapse
0shuvo0 profile image
Shuvo Author

Yes
You cab use text-shadow instead of box-shadow for texts btw

Collapse
andrewbaisden profile image
Andrew Baisden

Nicely explained.

Collapse
0shuvo0 profile image
Shuvo Author

Many many Thanks 💖

Collapse
bpsagar profile image
Sagar Chakravarthy

TIL 🙏

Collapse
emekaorji profile image
EmekaOrji

Amazing discovery! Thanks

Collapse
marwankous profile image
marwankous

it's Very useful, thanks

Collapse
0shuvo0 profile image
Shuvo Author

Glad you liked it

Collapse
imiahazel profile image
Imia Hazel

Thanks for the new concept. You have explained this elegantly. I have learned something new and achieved my daily goal happily. :)

Collapse
0shuvo0 profile image
Shuvo Author

I am glad I could help <3

Collapse
astrojets profile image
astro-jets

Nice and easy 👌

Collapse
0shuvo0 profile image
Shuvo Author

Thanks 💓

Collapse
chema profile image
José María CL

omg!

Collapse
adedking profile image
adedking

Thanks for this. Really needed

Collapse
0shuvo0 profile image
Shuvo Author

You're most welcome

Collapse
sintoparava profile image
Sinto PV

Great

Collapse
madrafj profile image
Ahmad Rafsanjani

Nice info.. many many thanks for sharing

Collapse
0shuvo0 profile image
Shuvo Author

glad you liked it

Collapse
hobart2967 profile image
Marco Klein

Have you got information about the performance of both solutions?