How to add a Drop Shadow on Images using CSS

Sometimes, you want to add a shadow to an image to add depth and make it more attention-grabbing.

You probably already know about the box-shadow property, but it's not quite what you want. The box-shadow property adds a shadow to a box, but it doesn't add a shadow to complex images with transparency.

If you want to add a drop shadow to an image, you need to use the filter property instead.

How to add a drop shadow to an image

As mentioned before, we want to use the filter property to add a drop shadow to an image. The value of the property is called drop-shadow(), and inside it are the following parameters:

• x-offset: The horizontal offset of the shadow.
• y-offset: The vertical offset of the shadow.
• blur-radius: The blur radius of the shadow.
• color: The color of the shadow.

Let's say you have this image:

HTML
<img class="image" src="https://sabe.io/images/saturn.png" />

Saturn on the homepage.

You can add a drop shadow to the image like this:

CSS
.image {
    filter: drop-shadow(0.25rem 0.25rem 0.5rem #000000);
}

Saturn with drop-shadow

That's all there is to it!

Remember that you have to use filter with drop-shadow() to add a drop shadow to an image and not use box-shadow.

As the name implies box-shadow only works on boxes, whereas an image with transparency will have a more complex shape than a box.

Conclusion

In this post, we've seen how we can use CSS to add a drop shadow to an image.

Hopefully, this has helped you add a drop shadow to your images.

Happy styling!

• Support Us