Search code examples
javascripthtmlcsscross-browseropacity

How to implement Cross Browser Opacity Gradient (Not Color Gradient)

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.

Solution

  • There's -moz-linear-gradient for recent Firefox versions and -webkit-gradient for WebKit browsers. Transparency for those two should be possible by using rgba colors.

    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.