CSS HTML Validator - The fast, all-in-one, HTML, CSS, Link, SEO, spelling, and accessibility checker for Windows, & htmlval for Mac and Linux
Home Help: -webkit-radial-gradient() CSS function
information note NOTE: Showing help for "radial-gradient" for the proprietary Safari/WebKit "-webkit-radial-gradient" CSS function.

Using vendor-specific extensions, which begin with a - (dash) or _ (underscore) character, will usually not cause conflicts. However, be aware that vendors may change these extensions at any time and that they should generally be avoided if possible. For more information, visit Vendor-specific Properties.

The -webkit-radial-gradient() Function

A radial gradient creates an image consisting of a progressive transition between two or more colors that radiate from a center point. Its ending shape may be either a circle or an ellipse.

Syntax for radial-gradient()
CSSradial-gradient( [ [ [ <rg-ending-shape> || <rg-size> ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <color-stop-list> ), where <rg-ending-shape> = "circle | ellipse", <rg-size> = "<rg-extent-keyword> | <length [0,∞]> | <length-percentage [0,∞]>{2}", <rg-extent-keyword> = "closest-corner | closest-side | farthest-corner | farthest-side", <color-stop-list> = "<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#", <linear-color-stop> = "<color> && <length-percentage>?", and <linear-color-hint> = "<length-percentage>"


  • Negative values for <size> are invalid.

Recommended Links

Search Engine Links (for more information)

Help us improve this page: Suggest a link or noteReport a problem