Home/ Questions/Q 6602539
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T18:53:18+00:00

What will be Opera and IE alternatives of following code? background-image: -webkit-gradient(linear, right top,

  • 0

What will be Opera and IE alternatives of following code?

background-image: -webkit-gradient(linear, right top, left bottom, from(#0C93C0), to(#FFF));
background-image: -moz-linear-gradient(right, #0C93C0, #FFF);

Note, I’ve tested following rules. All browsers supports them. But they are vertical gradients. How can I modify them to horizontal ones?

background-image: -webkit-linear-gradient(top, #0C93C0, #FFF); 
background-image:    -moz-linear-gradient(top, #0C93C0, #FFF); 
background-image:     -ms-linear-gradient(top, #0C93C0, #FFF); 
background-image:      -o-linear-gradient(top, #0C93C0, #FFF); 
background-image:         linear-gradient(top, #0C93C0, #FFF);
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    background-image:     -ms-linear-gradient(right, #0c93C0, #FFF); 
background-image:      -o-linear-gradient(right, #0c93C0, #FFF);

    All experimental CSS properties are getting a prefix:

    • -webkit- for Webkit browsers (chrome, Safari)
    • -moz- for FireFox
    • -o- for Opera
    • -ms- for Internet Explorer
    • no prefix for an implementation which is in full accordance with the specification.

    Use top right instead of right, if you want a different angle. Use left or right if you want a horizontal gradient.

    See also:

    Internet Explorer

    For <IE10, you will have to use:

    /*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
/*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";

    filter works for IE6, IE7 (and IE8), while IE8 recommends the -ms-filter (the value has to be quoted) instead of filter.
    A more detailled documentation for Microsoft.Gradient can be found at: http://msdn.microsoft.com/en-us/library/ms532997(v=vs.85).aspx

    -ms-filter syntax

    Since you’re a fan of IE, I will explain the -ms-filter syntax:

    -ms-filter: progid:DXImageTransform.Microsoft.Gradient(
     startColorStr='#0c93c0', /*Start color*/
     endColorStr='#FFFFFF',   /*End color*/
     GradientType=0           /*0=Vertical, 1=Horizontal gradient*/
);

    Instead of using a RGB HEX color, you can also use a ARGB color format. A means alpha, FF means opaque, while 00 means transparent. The GradientType part is optional, the whole expression is case-insensitive.

    • 0