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 any feedback, feel free do so by either sending me a message via e-mail, XMPP or IRC.