CSS3 Click Chart | CSS3 Browser Support and Information

Linear Gradients

Allows the creation of a linear gradient on an element using a function that's included where you would normally place an image reference.

Specification

Linear Gradients on W3C

Example Code

.element {
    background-image: -moz-linear-gradient(top, #000000, #ffffff); /* FF3.6 */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #000000), color-stop(1, #ffffff)); /* Safari 4+, Chrome 2+ */
    background-image: -webkit-linear-gradient(top, #000000, #ffffff); /* Safari 5.1+, Chrome 10+ */
    background-image: -o-linear-gradient(top, #000000, #ffffff); /* Opera 11.1+ */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */
    background-image: linear-gradient(to bottom, #000000, #ffffff);
}

Live Demonstration

This paragraph has a linear gradient
set as the background.

Desktop Browser Support

New Standard Syntax:
IE10+, Firefox 16+

New Vendor Syntax:
Firefox 10+, Opera 11.6+

Old Vendor Syntax:
IE10+, Firefox 3.6+, Chrome 10+, Safari 5.1+, Opera 11.6+

Ultra-Old Vendor Syntax:
Chrome 4 - 9, Safari 4 - 5

Tools / Polyfills

cssSandpaper
CSS3 PIE
CSS Gradient Background Maker
CSS gradients please!

Tutorials / Articles

CSS3 Linear Gradient Syntax Breakdown
The new linear gradient syntax