Possible to create a css shadow on transparent background PNG image?

Question

Anyone know if its possible to yet create a css based drop shadow on transparent background PNG image?

Perhaps with CSS3,jquery or lastly server side?

Example after effect of what I am trying to acheive :

Example

Pretty sure if it is possible it wouldn't be cross browser but willing to apply if it degrades well?

Feel free to add you input , open techniques discussion ..

I can't imagine it being possible. How would the browser know what the masking of the image is to cast the shadow? — MetalFrog, Mar 26 '12 at 19:10
Isn't that the image from the tutorial on how to do exactly what your asking for here: http://lineandpixel.com/blog/png-shadow? — Felix Eve, Jun 19 '14 at 05:04
probable duplicate: http://stackoverflow.com/questions/3186688/drop-shadow-for-png-image-in-css — RozzA, Sep 03 '14 at 08:40

score 10 · Answer 1 · edited Oct 14 '16 at 22:22

10

YES! It's possible to do shadows on a transparent .png in CSS3! I needed this in one project that was displaying like junk in IE10. Instead of using box-shadow, use filter: drop-shadow(). The syntax is pretty much the same. Here's the article: link

The final solution is this (in case the link breaks):

.filter-drop-shadow {
  -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

edited Oct 14 '16 at 22:22

gregsdennis

7,218
3
38
71

answered Nov 29 '12 at 12:59

Daniel Dogeanu

397
4
12

1

Aaaand I found it! Instead of using box-shadow, use filter: drop-shadow(). The syntax is pretty much the same. Here's the article: [link](http://bricss.net/post/33158273857/box-shadow-vs-filter-drop-shadow) – Daniel Dogeanu Nov 29 '12 at 13:14
Your comment is more valuable the your answer. You should edit the answer, as it doesn't really help (without the comment). – looper Nov 29 '12 at 13:19

score 3 · Accepted Answer · answered Mar 26 '12 at 20:12

3

If you load the image in to a canvas context you can do this.

good clean source here:

http://philip.html5.org/demos/canvas/shadows/various.html

answered Mar 26 '12 at 20:12

ERR0

635
4
18

score 1 · Answer 3 · answered Mar 26 '12 at 19:10

1

CSS has no idea what the shape of the image is, therefore cannot determine the outline and cannot apply a shadow to it.

You can create a black copy of the image and place it behind it, using z-index, directional offsets and some opacity. That's about it.

answered Mar 26 '12 at 19:10

Diodeus - James MacFarlane

112,730
33
157
176

Before I use 2 images only to make a shadow in a png, then i make the shadow better directly in the png. – Sven Bieder Mar 26 '12 at 19:13
Yeah, it really makes no difference at that point. You can't solve this at the client-end though. You need to look at a server-side solution. – Diodeus - James MacFarlane Mar 26 '12 at 19:19
@diodeus i guess you could get the image as blob and work on the data with javascript, so i would not say "can't", but more likely "don't want to" ... :) – Christoph Mar 26 '12 at 19:37
Well, you *could* pull it into canvas an determine the shape from there, but then you've written an entire plugin. Not exactly CSS any more (but a great idea). – Diodeus - James MacFarlane Mar 26 '12 at 19:43

score 1 · Answer 4 · answered Mar 26 '12 at 19:11

1

I know it's possible using the GD PHP library. Check out this tutorial:

http://www.codewalkers.com/c/a/Miscellaneous/Adding-Drop-Shadows-with-PHP/

I would guess that using a PHP solution would be the most compatible across browsers.

answered Mar 26 '12 at 19:11

Jordan Speizer

573
4
11

score 0 · Answer 5 · answered Mar 26 '12 at 19:10

No it is not possible. Even when the background is transparent, your image is still a rectangle and the shadow will be applied to the border around.

What you can do is putting a graphical shadow directly in the png. That works out great over a transparent background.

Possible to create a css shadow on transparent background PNG image?

5 Answers5

Linked