The other day Josh made a super cool tweet about drop-shadow supporting PNG's; I didn't know it supported PNG's, so I decided to give it a go.
🔥 `box-shadow` doesn't work well with transparent images. `filter: drop-shadow` does what you'd expect, adding a shadow to the image's contents.— Josh ✨ (@JoshWComeau) July 30, 2020
filter: drop-shadow(1px 2px 3px black);
CSS filters are so rad 🥰
Pen: https://t.co/rVKgSlijt1 pic.twitter.com/6rwc7gG1Ro
HTML Structure permalink
For my example we are using my favourite Pokémon "Eevee" and will place our three Eevee png's in a container.
<img src="https://i.imgur.com/q3SXJQf.png" />
<img src="https://i.imgur.com/q3SXJQf.png" class="box-shadow" />
<img src="https://i.imgur.com/q3SXJQf.png" class="drop-shadow" />
As you can see one is going to be a raw example, one will have a box-shadow and the third will have the drop-shadow.
CSS Box Shadow permalink
You probably have seen and used the box-shadow before, it's a cool feature and adds a shadow to our "box".
It works like this:
box-shadow: 0px 0px 10px #000;
It puts a shadow on the image, but on the box of it.
CSS Drop Shadow permalink
Then there is a CSS Filter which is amazing when it comes to contouring a PNG!
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
This all will result in the following Codepen.
Browser Support permalink
As mentioned before, CSS Filters are cool, but not widely supported yet 😩.
There is a polyfill, but also limited.