Semi transparent gradient image to darken without desaturating - html

Question

I'm designing a website that is going to have multiple nested divs for the side menu. Each div's background is a darker shade of blue than that of the div which surrounds it.
I'd like for each div to have a gradient effect in the background, where it goes from a slightly darker blue to the background color of the div.
I know CSS3 has built-in support for gradients, but older browsers wouldn't be able to display them, so that's not an option. Instead, what I've been doing is creating a PNG background for each individual div.
However, this PNG background option is not super sustainable. If I decide that I want a slightly different color as the background, I have to go create a new PNG with that new color. Annoying.
I wish that I could use a single semi-transparent grey to transparent PNG image in ALL of the divs so that I could freely change the background colors. But the problem with using such a PNG is that it kind of desaturates and dulls rather than darkens...
Is there any way to manipulate such a PNG to darken whatever it overlays WITHOUT desaturating???

Answer 1

There you go:
your-element{
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
background-image: -webkit-linear-gradient(top, #444444, #999999);
background-image: -moz-linear-gradient(top, #444444, #999999);
background-image: -ms-linear-gradient(top, #444444, #999999);
background-image: -o-linear-gradient(top, #444444, #999999);
background-image: linear-gradient(to bottom, #444444, #999999);
}
and your rule for IE:
your-element{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490);
zoom: 1;
}
Easy-peasy cross-browser compatible for say 99% of your browsers.