CSS HTML Validator: The All-In-One HTML, XHTML, CSS, Link, SEO, and Accessibility Checker
Home Help: -webkit-radial-gradient() CSS function

The -webkit-radial-gradient() 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.

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( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list>), where <ending-shape> is "circle" or "ellipse", <size> is "closest-side", "farthest-side", "closest-corner", "farthest-corner", a length (if <ending-shape> is "circle" or omitted), or <length-percentage>{2} (if <ending-shape> is "ellipse" or omitted), <color-stop-list> is "<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#", <linear-color-stop> is "<color> && <length-percentage>?", and <linear-color-hint> is <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