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




Was it helpful? Support me on Patreon

Patreon Logo

Top comments (23)

Collapse
 
boyney profile image
Boyne

I didn’t even know drop shadows existed until now

Collapse
 
0shuvo0 profile image
Shuvo

Hope you have a lot of fun with it

Collapse
 
calinzbaenen 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

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

Many many Thanks 💖

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

I am glad I could help <3

Collapse
 
chema profile image
José María CL

omg!

Collapse
 
sintoparava profile image
Sinto PV

Great

Collapse
 
bpsagar profile image
Sagar Chakravarthy

TIL 🙏

Collapse
 
marwankous profile image
marwankous

it's Very useful, thanks

Collapse
 
0shuvo0 profile image
Shuvo

Glad you liked it

Collapse
 
diannesowards profile image
Dianne Sowards

Your important discussion about Add a Drop Shadow in Photoshop to improve design skills seems accurate to me. Thank you very much.

Collapse
 
akramdk3 profile image
S.G.M Shamim Akram

Thank you for share article ........

Collapse
 
astrojets profile image
astro-jets

Nice and easy 👌

Collapse
 
0shuvo0 profile image
Shuvo

Thanks 💓

Some comments may only be visible to logged-in visitors. Sign in to view all comments.