How do I add shadow around a png image with transparency?

Question

I want to add a shadow to pngs with transparency.

Automatically this meant box-shadow is out - the shadow is rectangular/around the bounding box of the image.

Also tried drop-shadow:

-webkit-filter: drop-shadow(0px 0px 250px rgba(255, 255, 255, 0.4));
filter: drop-shadow(0px 0px 250px rgba(255, 255, 255, 0.4));

It looks great but the performance, particularly on Chrome, is very slow.

The only alternative I know of is to add the shadow within the image itself, however the shadow has a wide spread (so the image size is huge) and with compression it would look awful.

Are there any other options/suggestions?

Possible duplicate of [Drop shadow for PNG image in CSS](https://stackoverflow.com/questions/3186688/drop-shadow-for-png-image-in-css) — Bram Vanroy, Oct 10 '17 at 13:26

score 0 · Answer 1 · answered Oct 10 '17 at 13:24

Since the filter property is considered experimental at the moment, I would not expect it to be very fast. I would not even expect it to work across every browser (I'm talking to you, Internet Explorer!). So I would recommend to avoid these kind of functionality for now.

So, what can you do? In my opinion, there are two options, depending on how your image looks like.

1) You could either make it an SVG Image and add the Drop Shadow. For more information about this, please read this question.

2) Or, if the png file is too complicated for an SVG, you could add the dropshadow in the image itself by using tools like Photoshop or paint.NET.

Internet Explorer has its own version of the `filter` property, that was presumably the inspiration for the standard version. — Brilliand, Nov 20 '18 at 03:55
That's true, but it's obsolete and has a completely different syntax — Matthias Seifert, Nov 20 '18 at 09:38

How do I add shadow around a png image with transparency?

1 Answers1