Search code examples
csscross-browser

Is there a -moz-linear-gradient or a -webkit-gradient type CSS for Opera?


Is there a -moz-linear-gradient or a -webkit-gradient type CSS for Opera and other major browsers?


Solution

  • IE Does infact have support for gradients, Opera, however does not (as of 10.5). IE only supports gradient via the filter attribute for now, maybe in v10 this will change, but for now, you must use either the filter or -ms-filter attribute.

    Example:

    .simple-gradient {
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff');
        background-image: -moz-linear-gradient(top, #000, #fff);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#fff));
    }
    

    For more more information:

    General:

    Gradients in Internet Explorer 9

    Firefox:

    https://developer.mozilla.org/en/CSS/-moz-linear-gradient

    https://developer.mozilla.org/en/CSS/-moz-radial-gradient

    Webkit:

    http://webkit.org/blog/175/introducing-css-gradients/

    Internet Explorer:

    http://msdn.microsoft.com/en-us/library/ms532997%28VS.85%29.aspx