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
Nicely explained.
Many many Thanks 💖
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
Nice and easy 👌
Thanks 💓
Thanks for this. Really needed
You're most welcome
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
Some comments may only be visible to logged-in visitors. Sign in to view all comments.