56

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.

8
  • 3
    Probably better to do that in the PNG itself rather than do it in CSS.
    – vcsjones
    Jun 22, 2011 at 14:14
  • 1
    Not so much "better" but it's just the only way. It would be cool if it was possible. Jun 22, 2011 at 14:18
  • 2
    @Wesley: it's entirely possible with Super Duper Canvas Power™. Jun 22, 2011 at 14:23
  • @ChrisMorgan: To a .png? Have a link? I'd love to see it! Jun 22, 2011 at 14:24
  • @easwee DX filters in IE CSS are an abomination to mankind.
    – vcsjones
    Jun 22, 2011 at 14:26

6 Answers 6

134

It's definitely possible.

Using filters, sample:

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

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!)
2
  • 1
    That is some pretty cool stuff, albeit not a CSS solution. (+1 implied) Jun 22, 2011 at 14:47
  • @Wesley: hah, CSS? Overrated. ;-) Jun 22, 2011 at 14:49
12

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.

0
7

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

My example uses this picture:

original image

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:

blurred original

Step2. Removed light and contrast:

the shadow

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:

result: pseudo-shadow

Cheers!

Adi

3

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

1
  • Great! And even with chrome fix!!
    – psycho brm
    Nov 17, 2012 at 2:11
1

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;

Not the answer you're looking for? Browse other questions tagged or ask your own question.