Css3 Cross Browser Linear Gradient

CSS3 cross browser linear gradient

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.

CSS Gradient in cross browser format

The first version of gradient support was made available in webkit browsers in the following form:

-webkit-gradient( linear, x y, x y, from( color ), [color-stops...,] to( color ) )

Which is where you use:

background: -webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#357AE8));

But then the web decided that was too complex and simplified it to this (which is what most browsers use now):

-prefix-linear-gradient( direction|angle, color-stops... )

Which is where you use:

background-image: -webkit-linear-gradient(top,#4D90FE,#357AE8);
background-image: -moz-linear-gradient(top,#4D90FE,#357AE8);
background-image: -ms-linear-gradient(top,#4D90FE,#357AE8);
background-image: -o-linear-gradient(top,#4D90FE,#357AE8);
background-image: linear-gradient(top,#4D90FE,#357AE8);

IE feels it needs to be different, so it uses filters and has not upgraded to this new better way of expressing gradients until IE10. So, what you have is fine. If you want IE7-IE9 support, use this too:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4d90fe",endColorstr="#357ae8");

There are many tools out there too to help you make gradients and generate the cross-browser code for you (Google is yo friend). Colorzilla has a good one.

CSS: How to set up gradient background cross browser (only missing IE8 and IE9)

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0002b0fd', endColorstr='#028dca',GradientType=0 );

will give you IE6-9.

Using: http://www.colorzilla.com/gradient-editor/

Linear gradient in Chrome and Safari browsers

Try this - http://jsfiddle.net/fwkgM/1/

  background-color: #9e9e9e;
  background-image: linear-gradient(to bottom, #9e9e9e, #454545);

CSS3 Please

Cross browser CSS 3 text gradient

If you want this to work in non-WebKit browsers, you need to use a solution other than CSS.

There are some JavaScript solutions out there, or you can use SVG.

Here's a good blog post on how to do it: http://lea.verou.me/2012/05/text-masking-the-standards-way/

Using JavaScript has the downside of... using JavaScript, but at the end of the day this is only a decorative visual effect.

CSS3 Box-Shadow Linear Gradient?

Unfortunately, this is not possible. I suggest just using a div with a background-image that you create on Photoshop or likewise.

---

Related Topics