CSS 3 Linear Gradients

Creating linear gradients are extremely easy thanks to CSS 3. There is no longer any need to use background images, which not only saves on unnecessary network requests, but is also so much more convenient for us Web developers.

As CSS gradients are relatively new to the scene, older versions of most Web browsers provided proprietary non-standard CSS properties allowing Web developers to create gradients in CSS as a provisional measure while the W3C community worked on the standardised property and syntax for creating CSS 3 gradients.

What Web browsers support CSS gradients?

CSS gradients work in Firefox 3.6 and above, Chrome 4 and above, Opera 11.1 and above, Safari 4 and above (iOS Safari 3.2 and above), and IE 10 and above. Older versions of Internet Explorer can create CSS gradients using a proprietary Microsoft filter.

Note: The examples below are for creating linear gradients from the top to the bottom of the target element.

Standards Compliant Browsers

background: linear-gradient(to bottom, #fff, #fff);

This works in IE 10 and above, Firefox 16 and above, Chrome 26 and above, Opera 12.1 and above and Safari 6.1 and above. This is the standards-compliant way to create CSS gradients.

For Older Versions of Firefox

background: -moz-linear-gradient(top, #fff, #fff);

The -moz proprietary property is for Firefox version 3.6 through to version 15.

For Older Versions of Chrome and Safari

background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));

The -webkit proprietary property is for Chrome version 4 through to version 25, and Safari version 4 through to version 6.

For Older Versions of Opera

background: -o-linear-gradient(top, #fff, #fff);

The -o proprietary property is for Opera version 11.1 through to version 12.

For Older Versions of Internet Explorer

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr=‘#fff');

This works in Internet Explorer 6 through to Internet Explorer 9.

Note: If you care about making sure your CSS code is fully valid, be advised using proprietary CSS properties will result in your stylesheet being rendered invalid CSS by the W3C validator.