Drop shadow for PNG image in CSS

Question

HI,

i have png image, that has free form (non square).

I need to apply drop-shadow effect to this image.

The standard approach ...

-o-box-shadow:      12px 12px 29px #555;
-icab-box-shadow:   12px 12px 29px #555;
-khtml-box-shadow:  12px 12px 29px #555;
-moz-box-shadow:    12px 12px 29px #555;
-webkit-box-shadow: 12px 12px 29px #555;
box-shadow:         12px 12px 29px #555;

... displays shadows for this image, like it is a square. So, i see my image and square shadow, that does't follows the form of object, displayed in image.

Is there any way to do it properly ?

Thanks.

Answer 1

this won't be possible with css - an image is a sqare, and so the shadow would be the shadow of a square. the easiest way woul be to use photoshop/gimp or any other image editor to apply the shadow like galambalazs described.

Answer 2

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:

for i in *.png; do convert $i '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage shadow/$i.png; done

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