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

Accepted answer
Score: 133

It's definitely possible.

Using filters, sample:

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


Score: 19

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

If you want more information about 5 it, search the web for things like "html 4 canvas blur" and "html canvas 3 load image". Or better still, use the 2 canvas shadow functionality which can do 1 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!)
Score: 12

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

It's not possible to do this using CSS:

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

Score: 7

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

My example uses this picture:

original image

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

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

Step1. Add blur:

blurred original

Step2. Removed 5 light and contrast:

the shadow

So I have the original 4 and the shadow.

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


.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 2 one div and set attribute class="divOriginal common" and another one with class="divShadow common".

The 1 result should be:

result: pseudo-shadow



Score: 3

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

Score: 1

Use createjs sample can be found at JSFiddle

shadowTarget.shadow = shadow;


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

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


More Related questions