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);
}
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));
}
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);
}
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));
}
Make sure you checkout my other articles and YouTube channel
Was it helpful? Support me on Patreon
Top comments (23)
I didn’t even know drop shadows existed until now
Hope you have a lot of fun with it
If I recall correctly, being rectangle/conforming to visible shape also applies to text, and other things with possible transparency, doesn't it?
Yes
You cab use text-shadow instead of box-shadow for texts btw
Nicely explained.
Many many Thanks 💖
Thanks for the new concept. You have explained this elegantly. I have learned something new and achieved my daily goal happily. :)
I am glad I could help <3
omg!
Great
TIL 🙏
it's Very useful, thanks
Glad you liked it
Your important discussion about Add a Drop Shadow in Photoshop to improve design skills seems accurate to me. Thank you very much.
Thank you for share article ........
Nice and easy 👌
Thanks 💓
Amazing discovery! Thanks
Thanks for this. Really needed
You're most welcome
Have you got information about the performance of both solutions?
Nice info.. many many thanks for sharing
glad you liked it
Some comments may only be visible to logged-in visitors. Sign in to view all comments.