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
  • Reviewed
  • WeAre8 Editor commented
    13 Mar 04:04am


  • Christopher Maier commented
    7 Mar 08:01am

    Insane how this isn't added already.

  • Steve commented
    29 Jun, 2023 12:25am

    +1 for this

  • Kyle Kirchgessner commented
    28 Apr, 2023 01:36am


  • Web LoveWell commented
    7 Jul, 2022 08:07pm

    Just saying, Wix has this feature and Webflow doesn't. That should be enough for them to add it ASAP.

  • Daniel Blaho commented
    16 Apr, 2022 05:35am

    This would be a fantastic upgrade! Next, clip-path. The possibilities... phew man that would awesome.

  • Lasse Wennerholm Linding commented
    27 Jan, 2022 11:44am

    We need this! I'm forced to upload my image content as png's..

  • Xanthe commented
    23 Jun, 2021 09:42am

    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 :(

  • Trilo commented
    12 Apr, 2021 10:40am

    I've been trying to figure out if this is possible. Any updates here webflow?

  • Tony Mungiguerra commented
    27 Nov, 2018 05:58pm

    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.

  • +26