Adding a shadow to an image with an alpha channel using the `box-shadow` property doesn't wrap the shadow around the transparent parts of the image. Instead we just get a square box shadow. In order to make the shadow wrap naturally around the contours of the image, we need to use `filter: drop-shadow(x, y, blur, spread, color)`.
This is a useful feature for two reasons:
-
Applying a drop shadow for images with alpha channels. This one is pretty obvious. If we have an image, a logo for example, that we want to raise off the background, a shadow that wraps the contours of the logo is a great way to pull the logo forward and pop out of the page. (Example: I used this for the logos in the footer of this website http://www2.unb.ca/alc/)
-
Applying an outline/border for images with alpha channels. This is a lesser-known use case for the drop-shadow filter. By combining several drop-shadows, we can add a shadow that functions like an image outline. This is useful if a logo is placed on top of a busy background or if parts of a logo have poor contrast with a background. (Example: I didn't use drop-shadow for this but it's the same idea for the colored titles on this website: http://davidleger95.github.io/nac-website/)
MUST HAVE
Insane how this isn't added already.
+1 for this
PLEASE!!!
Just saying, Wix has this feature and Webflow doesn't. That should be enough for them to add it ASAP.
This would be a fantastic upgrade! Next, clip-path. The possibilities... phew man that would awesome.
We need this! I'm forced to upload my image content as png's..
I'm sad that this isn't a thing yet - have to still add custom code to get a shadow on a SVG instead of around its container :(
I've been trying to figure out if this is possible. Any updates here webflow?
It is way more logical to apply the shadow to the image rather than the image's container. I'm a bit stumped as to why it works the way it does since you can apply shadows to whatever when you are actually writing CSS.