Basically you have to keep transparency where you want the color to change. So I would start with a shape with 0% fill and only the effects showing. Then, depending on the shape, you might have to create a mask (e.g. invert the shape) in the color or texture of the background to hide unwanted coloring from the background. Export to .png to maintain the transparency.

The mask was simply a hint to work around an issue with rounded corners (or custom shapes) that have seen in the past where webdevelopers need to put a rectangular field behind the PNG.
–
KMSTRJul 3 '12 at 12:46

@KMSTR Oh ok, I understand. However, if I'm not mistaken, it isn't possible to actually save a mask, right?
–
poepjeJul 3 '12 at 12:51

That is correct. My approach was to simply leave non-transparent background around the button (e.g. the menue background the icon will be used on), leaving a rectangular graphic with a "hole" in the middle where css color can show through. Essentially faking a surronding background.
–
KMSTRJul 3 '12 at 12:58

Ah yes that would be a good solution in most cases, I agree!
–
poepjeJul 3 '12 at 12:59

If you are using Photoshop CS6 Extended (and some prior versions) you can create your Vector Shape then right-click on it or select Create 3D Extrusion from the 3D menu. Once it's a 3D shape, select the button in the 3D panel and in the Properties change the Extrusion to 5 or 10 or something you like, and in the Cap attributes, adjust the Bevel and Inflation until you're happy with it. You can add and reposition lights to get the lighting just the way you like as well.

Select the Materials (Front/Back Bevel/Inflation) and then change the Opacity (in Properties panel) to what you like as well. The less opacity, the more transparent it is. You can even play with the shadows from the lights as they are transparent too. Finally, when you're happy with the shape, highlights and caps, select Render from the 3D menu—this may take a little longer but provides much better results than the real-time GL preview.

Once it finishes you can Save For Web... Use a PNG-24 and all of your transparent shadows and materials will be transparent as well. BEFORE you save the PNG, in the lower left of the Save For Web dialogue there is a preview button, preview it in Safari (or whatever browser you have)—and if your browser has developer tools, change the background color and you can see that all of the transparent parts of your graphic are allowing the background color/image to show through.

I will also say that if you start with a vector shape, you can select it in the 3D panel and select Edit Source from the Properties panel—this pops open the original vector shape so you can adjust it, save it, and then Photoshop applies the changes to the 3D object. This provides you with a non-destructive and fully-editable workflow.

Example of a 3D Extrusion with Bevel and Inflation, Glass material, rendered out, then Save for Web as PNG-24 with Transparency then placed on different backgrounds... I did this as a quick example and to stop the haters who thought I was spamming without even know the power of Photoshop's 3D features. (^_^)

@Cotton if you want the master PSD file, ping me and I'll send it to you... but not the haters—they'll have to read and learn on their own. I can provide you with the source image as well as the CSS to set the background color if you need that too. (^_^)