How to implement cross-browser opacity gradient (not color gradient)

Question

How can I implement a cross browser transparency gradient (and not a color gradient)? See the following code:

<div style="background-color:Red;display:block;height:500px;width:500px;filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=500)"></div> 

It works fine in IE, but not in other browsers like firefox, safari..etc. What is the equivalent syntax for firefox? Please do not suggest me to use a gradient image.

Answer 1

There is -moz-linear-gradient for the latest versions of Firefox and -webkit-gradient for WebKit browsers. Transparency for the two should be possible using rgba colors.

https://developer.mozilla.org/en/CSS/-moz-linear-gradient
http: //developer.apple.com/safari/library/documentation / ...

The only real 100% cross browser compatible solution is the image.

Answer 2

Thanks @deceze

I am writing a css sample for other people having the same requirement

 top:0px; opacity: 0.6; width: 1944px; height: 896px; position: absolute; z-index: 500; background-color:#dcdcdc; /* For WebKit (Safari, Google Chrome etc) */ background: -webkit-gradient(linear, left top, left bottom, from(#dcdcdc), to(rgba(215,212,207,0))); /* For Mozilla/Gecko (Firefox etc) */ background: -moz-linear-gradient(top, #dcdcdc, rgba(215,212,207,0)); /* For Internet Explorer 5.5 - 7 */ filter:alpha(Opacity=70, FinishOpacity=0, Style=1, StartX=1242, StartY=0, FinishX=1242, FinishY=696); /* For Internet Explorer 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70, FinishOpacity=0, Style=1, StartX=1242, StartY=0, FinishX=1242, FinishY=696)";