CSS3 Click Chart | CSS3 Browser Support and Information

Radial Gradients

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

Specification

Radial Gradients on W3C

Example Code

.element {
    background-image: -webkit-gradient(radial, center center, 10, center center, 70, from(#fff), to(#000)); /* for older webkit */
    background-image: -webkit-radial-gradient(center center, circle closest-corner, #fff 10%, #000 70%);
    background-image: -moz-radial-gradient(center center, circle closest-corner, #d85e0c 10%, #f39454 70%);
    background-image: radial-gradient(center center, circle closest-corner, #fff 10%, #000 70%);
}

Live Demonstration

This paragraph has a radial gradient
set as the background.

Desktop Browser Support

New Standard Syntax:
IE10+, Firefox 16+

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

CSS Gradient Background Maker

Tutorials / Articles

CSS3 Radial Gradient Syntax Breakdown
Using Unprefixed CSS3 Gradients in Modern Browsers