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.
• MDN Docs for box-shadow.
• MDN Docs for filter: dropshadow().
• I took the box-shadow styles from the TailwindCSS docs.