CSS3 cross browser linear gradient
-
29-01-2021 - |
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. Can anyone help me to 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);
Solution
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:
- MDN:
linear-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.
OTHER TIPS
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.
Have you tried Colorzilla's Ultimate CSS Gradient Generator?
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.
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;
Hope this might help some people :).