How to add shadows to transparent images using CSS | Hund

Hund

How to add shadows to transparent images using CSS

Sunday, May 23, 2021

This is an transparent image that I made in Inkscape. The shadows is added with CSS.

The CSS-class looks like this:

img {
    filter: drop-shadow(1px 3px 5px rgba(0,0,0,0.55));
}

A good use case for this would be if you want to have shadows around your images in your articles, but don’t want non-square images to look weird.

Meta

Feedback

If you want to leave feedback, you can do so by either sending me a message via email, XMPP or via IRC.