CSS Gradient Background with run-time variable primary color?

You see it everywhere on the web...  Table headers or page headers using some type of gradient or fade as the background to the header...  Just look at this page that you are looking at right now (I'm using the "Expert" skin)!  I have Illustrator CS2 and it is easy enough to create a gradient image that can be used for a background.

I want to know if there is some way to create an overlay image that uses transparency that would work with ANY color background.  I am a coder, not a designer or graphic artist or anything like that.  I figure there has to be some way to create this image such that I can change the background color (in CSS) to whatever I want, and let the same background image create the appearance of a gradient with that color.

I was mildly successful at making this happen.  I just did a a gradient from white to black, set the opacity to 50%, and saved it as a PNG24.  It kinda worked, but the "white" part at the top washed out the background color that it was on top of and it didn't really look right.  For the non-techie graphic artist like me, I think what I wanted is that instead of using white as one of the colors in the gradient, I wanted to use transparent.  But I couldn't find a way to do that (and that might not be possible?).

Here is an example CSS of what I was thinking I could make work.  The idea here is that you could (programatically) change the background color of the gradient as the page is served, rather than having to create a whole bunch of different images with the color you wanted.  My only other concern with this approach is how to handle varying heights of the actual containing block and a fixed image size, but first things first!  Is something like this possible or just a pipe dream?

1:
2:
3:
4:

.gradient {
   background-color : #FF0000;
   background-image : url('gradient.png');
}