Add a Shadow to Images with a Transparent Background

Typically when I need to add a shadow to something with CSS, I reach for the box-shadow CSS property. Though, this doesn’t have the desired effect when applying it to an image with a transparent background.

For example:

1
2
3

#modinfinity-logo {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

Will result in an image that looks like this: INSERT IMAGE HERE

The shadow is placed behind the full image, showing a rectangular shape. It’s not doing what we expect it to do.

It is possible to add a shadow to the image contents, though! You can use the CSS filter property to apply a drop shadow to the image:

1
2
3

#modinfinity-logo {
  filter: drop-shadow(10px 10px 7px rgba(0, 0, 0, 0.4));
}

Will result in an image that looks like this: INSERT IMAGE HERE

References

• I found out about this through a tweet by @JoshWComeau.

  🔥 `box-shadow` doesn't work well with transparent images. `filter: drop-shadow` does what you'd expect, adding a shadow to the image's contents.
  
  .my-img {
  filter: drop-shadow(1px 2px 3px black);
  }
  
  CSS filters are so rad 🥰
  
  Pen: https://t.co/rVKgSlijt1 pic.twitter.com/6rwc7gG1Ro

  — Josh W. Comeau (@JoshWComeau) July 30, 2020

• MDN Docs for box-shadow.
• MDN Docs for filter: dropshadow().
• I took the box-shadow styles from the TailwindCSS docs.