14 Answers
14

A little late to the party, but yes, it is totally possible to create "true" dynamic drop shadows around alpha masked PNGs, using a combination of dropshadow-filter (for Webkit), SVG (for Firefox) and DX filters for IE.

Even more late to the party, but +1 for the cross-plateform CSS filter property... Though, I don't think HTML SVG tags be needed, any PNG with alpha channel will do the trick
–
chlkbumperJun 24 '13 at 4:46

1

Dudley Storey is right. Without the SVG, the shadow doesn't appear in Firefox. @AntonAL could accept this answer.
–
javsmoOct 15 '13 at 21:22

Very good! It works in FF/IE/S for me, at least.
–
Charles GoodwinNov 26 '13 at 16:05

If you have >100 images that you want to have drop shadows for, I would suggest using the command-line program ImageMagick. With this, you can apply shaped drop shadows to 100 images just by typing one command! For example:

The above (shell) command takes each .png file in the current directory, applies a drop shadow, and saves the result in the shadow/ directory. If you don't like the drop shadows generated, you can tweak the parameters a lot; start by looking at the documentation for shadows, and the general usage instructions have a lot of cool examples of things that can be done to images.

If you change your mind in the future about the look of the drop shadows - it's just one command to generate new images with different parameters :-)

Could whoever modded this answer down please explain why? It's hard to improve an answer without this sort of feedback :-)
–
psmearsAug 5 '10 at 11:09

9

While it's a solution, it does not answer the question!
–
leoJun 13 '12 at 7:44

3

The asker is attempting to have the browser render the shadow, not execute scripts on the server that can create shadows. This is useful information but not the same problem space.
–
SG1Aug 7 '13 at 20:47

There is no way to get the outline of the image exactly but you can fake it with a div behind the image in the center.

If my trick doesn't work then you have to cut up the image and do it for every single of the little images. (the more images the more accurate the shadow will look)
but for most images it looks alright with just one img.

what you need to do is to put a wrap div around your img like so

<div id="imgWrap">
<img id="img" scr="imgLocation">
</div>

then you put an empty divider inside the wrap (this will serve as the shadow)

now position the imgWrap to position the original img...
to center the shadow of the img you can mess with the first two values
of the box-shadow making them negative....
or you can position the img and the shadow divs absolutely
making img top and left values = 0
and the shadow div values = half of img width and height respectively.

If this looks horrid cut your img up and try again.

(If you don't want the shadow behind the img just on the outline then you need to make your img opaque and make it act as if it was transparent which is not that hard and you can comment and I'll explain later)

A trick I often use when I just need "a little" shadow (read: contour must not be super-precise) is placing a DIV with a radial fill 100%-black-to-100%-transparent under the image. The CSS for the DIV looks something like:

This will create a circular black faded-out 'dot' on a 320x320 DIV. If you scale the height or width of the DIV you get a corresponding oval. Very nice to create eg shadows under bottles or other cylinder-like shapes.

There is an absolute incredible, super-excellent tool to create CSS gradients here:

ps: Do a courtesy ad-click when you use it. (And, no,I'm not affiliated with it. But courtesy clicking should become a bit of a habit, especially for tool you use often... just sayin... since we're all working on the net...)

“Courtesy ad-click”? Seriously, how is ripping off advertisers a good thing for the ’Net? Many of us are advertisers ourselves, or are paid by them, so triggering charges for advertisers for adverts for products you are never going to buy is a really unpleasant thing to do. If you are interested in an ad, click it by all means, but don’t do this!
–
alastairApr 15 '14 at 9:34

Oh, get off your moral high-ground, Alastair. The real-world looks a bit different. "Ripping off advertisers"? Really? LOL - Give me a break, man. I've been in advertising and marketing for nearly 30 years. To place the odd courtesy click has no influence whatsoever other than supporting the sites you use FOR FREE. If you're worried about inflation of prizes etc, worry about the increasingly monopolizing trends throughout the industry. That's what's distorting advertising prizes, not the odd courtesy click.
–
Rid IculousApr 17 '14 at 1:56

This won't be possible with css - an image is a square, and so the shadow would be the shadow of a square. The easiest way would be to use photoshop/gimp or any other image editor to apply the shadow like core draw.

Thanks for reply. But, adding image in editor will have problems in the future, when i will have >100 images and should tweak shadows a little. T he best solution of my problem - is to add additional shadow image below each image in question with jQuery.
–
AntonALJul 6 '10 at 14:06

In my case it had to work on modern mobile browsers, with a PNG image in different shapes and transparency. I created drop shadow using a duplicate of the image. That means I have two img elements of the same image, one on top of the other (using position: absolute), and the one behind has the following rules applied to it: