Drop-shadow filters.

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:

  1. 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/)
  2. 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/)
  • David Leger
  • Jun 2 2018
  • Tony Mungiguerra commented
    November 27, 2018 17:58

    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.