Can you add a non-square drop shadow to PNG content with CSS? [duplicate]

Question

Is it possible to do a drop shadow on the content of a PNG?

Not a square, but an object drop shadow that
acts on the non-transparent content of the PNG.

Answer 1

It's definitely possible.

Using filters, sample:

img {      -webkit-filter: drop-shadow(5px 5px 5px #222);     filter:         drop-shadow(5px 5px 5px #222);  } 

Answer 2

It's not possible to do that in CSS. However, it's quite possible to do it through a canvas, but it will be somewhat inefficient (as it's processed by the client each time) and will be JavaScript dependent. Doing it in the PNG will be easier and will work on more browsers.

If you want more information about it, search the web for things like "html canvas blur" and "html canvas load image". Or better still, use the canvas shadow functionality which can do it all.

Here's an example: http://philip.html5.org/demos/canvas/shadows/various.html

• create context from canvas
• set context.shadow(Color|OffsetX|OffsetY|Blur) as desired
• load PNG from img tag with context.drawImage
• ah! the shadows!

And a bonus:

• use context.toDataURL if you want to export to PNG (make a web app which you drop PNGs in and it gives you shadows!)