Here's a hair-puller that I run into time and again when turning design files into HTML/CSS.

I have a button under which I'd like a nice shadow effect that can't be accomplished with CSS3. The only way to use this in a web page is with a transparent png for the shadow.

The shadow I've been given by the designer is a bitmap that goes from dark gray in the middle to opaque white on the outside. In a graphical editor, I can use this on any background color without showing the opaque white by using a blending mode like multiply or darken.

My question is, how can I get this shadow into a usable png for the web that does not show the opaque white? Basically, I want to trade all of the "white" values above a certain gray value for opacity. For example, #fff would equal opacity:0, #ddd = opacity:0.5, and #ccc = opacity:1.

Is this possible in Fireworks, Photoshop, or GIMP?

My reason for needing to do this is that I would like to have the option of changing a CSS background color in the page and not have to go generate a new shadow png that matches that background color.