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

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!)

Answer 3

How times change. It's now possible in some browsers, as shown in the currently accepted answer.

---

It's not possible to do this using CSS:

That's what I assume you're asking for.

Answer 4

Until it will be available to CSS, you can try my approach.

My example uses this picture:

because it has a transparent background and it isn't square (for CSS's box-shadow to get into action). It's not very fancy, but serves this small and simple tutorial fine.

Next step I took was to create another image, based on the one above, to place it under the original.

Step1. Add blur:

Step2. Removed light and contrast:

So I have the original and the shadow.

Next I will display it as if it is a shadow:

Style:

.common {width: 100px;height: 100px;background-size: 100% 100%; position:absolute;}

.divOriginal {background-image: url(../img/original.png);top:2em;left:2em;z-index:10;}

.divShadow {background-image: url(../img/shadow.png);top: 3em;left: 2.5em;z-index:8;}

Do the magic:

Add one div and set attribute class="divOriginal common" and another one with class="divShadow common".

The result should be:

Cheers!

Adi

Answer 5

I've wrote a jQuery plugin for this, based on Chris Morgan's suggestion about canvas. You can find it on GitHub here: https://github.com/Kukunin/image-shadow

Answer 6

Use createjs sample can be found at JSFiddle

shadowTarget.shadow = shadow;

stage.addChild(shadowTarget);

shadowTarget.x = 500 / 2;
shadowTarget.y = 450 / 2;

shadowTarget.regX = shadowTarget.image.width/2;
shadowTarget.regY = shadowTarget.image.height/2;