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:

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

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.

For example:

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

Will result in an image that looks like this:

References

• I found out about this through a tweet by @JoshWComeau on Twitter:

🔥 `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 ✨ (@JoshWComeau) July 30, 2020

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