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:

Logo for Modinfinity LLC, it shows a wordmark of the company name, Modinfinity, and two triangles to the left of it overlapping. The bottom triangle is a bright teal while the triangle on top is transparent with a thick black outline.

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:

Logo for Modinfinity LLC, it shows a wordmark of the company name, Modinfinity, and two triangles to the left of it overlapping. The bottom triangle is a bright teal while the triangle on top is transparent with a thick black outline.

References


Posted

in

by

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *