[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:

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

The 1 result should be:

result: pseudo-shadow

Cheers!

Adi

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;

stage.addChild(shadowTarget);

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

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

Source: stackoverflow.com

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

How to create a frosted glass effect using CSS?

backdrop-filter not working for nested elements in Chrome

Parent element backdrop-filter does not apply for its child

PIL: How to make area transparent in PNG?

How to add inner border radius of shadow div in react native

How to set a background opacity without affecting the text

SVG shadow cut off

How can I add shadow to a circle UIImageView or UIView?

How can I make a shadow with a material design card?

Adding drop shadow to UITableView