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:
Leave a Reply