CSS3 cross browser linear gradient

Question

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);

score 46 · Accepted Answer · edited Jun 20 '20 at 09:12

46

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.

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 25 '11 at 15:55

Rob W

341,306
83
791
678

`-ms-linear-gradient` doesn't exist. **EDIT**: Until IE10 – SLaks Sep 25 '11 at 15:57
Thx very very much. Please take a look at my updated question. There are 5 vertical rules. First 4 are well known: for each browsers stands it's rule. I wonder, what 5th rule: `linear-gradient` standing for? – Tural Ali Sep 25 '11 at 15:59
@SLaks: Thats not true! See http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html – Robin Sep 25 '11 at 16:00
@SLaks so there is no alternative for IE? – Tural Ali Sep 25 '11 at 16:01
@L0rdDEVdem0rt: -ms-linear-gradient will work with Internet Explorer 10 – Robin Sep 25 '11 at 16:02
what will look like filer alternative? – Tural Ali Sep 25 '11 at 16:05
your solution for ie doesn't work. It show wrong color and wrong angle. please test it on browser – Tural Ali Sep 25 '11 at 16:12
are you sure that it's horizontal rule? – Tural Ali Sep 25 '11 at 16:15
I've provided an excellent link to the documentation at the bottom of my answer. Use `GradientType=1` if you want to have horizontal gradients. At your Question, you mentioned vertical **and** horizontal gradients. For the sake of the example, I had to pick either of the two. – Rob W Sep 25 '11 at 16:16
See also: http://stackoverflow.com/questions/10165412/how-to-apply-webkit-gradient-to-ie – Rob W Apr 15 '12 at 20:08
Thanks for this @RobW! However, the first listed IE `filter` property does not validate in CSS 2.1 and yields the following warning: `'filter' is not a known CSS property name.` – Ian Campbell Jul 08 '13 at 19:26
2

@IanCampbell Even worse, `filter` is also used in the [Filter effects](http://www.w3.org/TR/filter-effects/) specification. I recommend to leave out `ms`, because no sane person is using IE7 any more. IE8 is still used, because it's the last supported IE version on Windows XP. – Rob W Jul 08 '13 at 19:31
Thanks @RobW, and point taken ha -- IE7 is for crazy people ;). I *do* have to support IE8+ though, so I will use `-ms-filter:` and ***not*** use `filter:` as you are suggesting. – Ian Campbell Jul 08 '13 at 19:39
I removed `-image` and still works, so why did you add that ? – Francisco Corrales Morales Mar 31 '14 at 14:30
1

@FranciscoCorrales `background` is a shorthand for `background-image`, `background-color`, etc. `background-image` is more specific than `background`. See also https://developer.mozilla.org/en-US/docs/Web/CSS/background – Rob W Mar 31 '14 at 17:25
@RobW using firefox 7.0.1 , "background: -moz-linear-gradient(to bottom, #c4daef 15%,#a1bed2 46%,#a1bed2 100%);" is not working. – sibi Jan 11 '18 at 10:03

Robin · Answer 2 · 2011-09-25T16:08:02.950

Here an example, which works with Opera, Internet Explorer and many other web browsers. If a browser does not support gradients, it will show a normal background color.

background: #f2f5f6;
background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc));
background: -webkit-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
background: -o-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
background: -ms-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 );
background: linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);

I've stolen this from this website. Microsoft has built their own generator here.

What is the difference between -webkit-gradient and -webkit-linear-gradient? — user2202911, Sep 02 '14 at 15:51

Volker E. · Answer 3 · 2015-05-25T08:57:19.150

Rob W's answer is comprehensive, at the same time verbose. Therefore I'd like to go for a summary supporting current browsers end of 2014, while ensuring some backwards-compatibility at the same time, leaving out just IE6/7's invalid capability of rendering a linear gradient and early Webkit (Chrome1-9, Saf4-5 special way (-webkit-gradient( linear, left top, left bottom, color-stop( 0, #0C93C0 ), color-stop( 100%, #FFF ) );)

Standards syntax has changed from beginning gradient position to to direction, e.g. background-image: linear-gradient( to bottom, #0C93C0, #FFF );

Widely-supported, easy-to-read CSS:

background-color: #8BCCE1;                                             /* fallback color (eg. the gradient center color), if gradients not supported; you could also work with an gradient image, but mind the extra HTTP-Request for older browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorStr=#0C93C0, EndColorStr=#FFFFFF )"; /* IE8-9, ColorZilla Ultimate CSS Gradient Generator uses SVG bg image for IE9 */

background-image: -webkit-linear-gradient(       top, #0C93C0, #FFF ); /* Chrome10-25, Saf5.1-Saf6, iOS -6.1, Android -4.3 */
background-image:    -moz-linear-gradient(       top, #0C93C0, #FFF ); /* Fx3.6-15 */
background-image:      -o-linear-gradient(       top, #0C93C0, #FFF ); /* Op11.10-12.02 */
background-image:         linear-gradient( to bottom, #0C93C0, #FFF ); /* W3C, Fx16+, Chrome26+, IE10+, Op12.10+, Saf6.1+ */

An interesting side fact is, that most blog posts and browser gradient tools on the web, like f.e. famous ColorZilla's "Ultimate CSS Gradient Generator" include the MS vendor-prefixed -ms-linear-gradient value.
It's supported from Internet Explorer 10 Consumer Preview on. But when you're including standards value linear-gradient, Internet Explorer 10 Release Preview renders it appropriately.
So by including -ms-linear-gradient and standards way, with -ms you're actually addressing just IE10 Consumer Preview, which comes down to nobody in your audience.

score 2 · Answer 4 · edited Jul 21 '22 at 14:05

I got the solution for almost everything!

/* Safari 4+, Chrome 1-9 */                         background-image:   -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#FFFFFF));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */    background-image:   -webkit-linear-gradient(top, #000000, #FFFFFF);
/* Firefox 3.6+ */                                      background-image:   -moz-linear-gradient(top, #000000, #FFFFFF);
/* IE 7-*/                                                  filter:                 progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#FFFFFF', GradientType=0);
/* IE 8+*/                                                  -ms-filter:             "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#FFFFFF', GradientType=0)";
/* IE 10+ */                                                background-image:   -ms-linear-gradient(top, #000000, #FFFFFF);
/* Opera 11.10+ */                                      background-image:   -o-linear-gradient(top, #000000, #FFFFFF);
/* fallback image                                       background-image:   url(images/fallback-gradient.png);*/
/* fallback/image non-cover color */                background-color:   #000000;

CSS3 cross browser linear gradient

4 Answers4

Internet Explorer

`-ms-filter` syntax

Linked

Related

CSS3 cross browser linear gradient

4 Answers4

Internet Explorer

-ms-filter syntax

Linked

Related

`-ms-filter` syntax