How can I implement cross browser opacity gradient (not color gradient)?
See 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 equivalent syntax for firefox?
Please don’t suggest me to use gradient image.
There’s
-moz-linear-gradientfor recent Firefox versions and-webkit-gradientfor WebKit browsers. Transparency for those two should be possible by usingrgbacolors.https://developer.mozilla.org/en/CSS/-moz-linear-gradient
https://developer.apple.com/library/content/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html
The only real 100% cross-browser compatible solution is an image though.