HTML and CSS Reference
If no size is set, it defaults to farthest-corner .
Setting the Position of the Gradient
You can position the gradient using the at keyword followed by any expression that's valid for the background-
position property. For example, the circular gradient in Figure 19-18 is positioned 100px from the left and 50px
from the top like this (the code is in farthest-corner.html):
background-image: radial-gradient(circle farthest-corner at 100px 50px , #C24704, #FFEB79
■ The shape, size, and position values are passed to the radial-gradient() function as a space-
separated list. The shape and size values can be in either order, but the position must come after them (unless both
shape and size are omitted). The list of color stops always comes last.
If the position is omitted, the gradient is centered in the gradient box.
Syntax for Browser-Specific radial-gradient() Functions
To create a radial gradient in browsers that don't yet support the standard syntax, you need to use a browser-
specific version of the radial-gradient() function. They all take the same arguments separated by commas:
Position: This specifies where to locate the center of the circle or ellipse, using any
value that's valid for background-position . If omitted, it defaults to center .
Shape and size: The shape and size of the gradient are presented as a single argument
using the same keywords as the standard syntax. Two additional keywords, contain
and cover , act as synonyms for closest-side and farthest-corner , respectively.
Both shape and size are optional. If omitted, they default to ellipse and farthest-
Color stops: A comma-separated list of colors with optional positions along the
gradient ray starting at the center.
These arguments are very similar to the standard syntax, but with the following important differences:
The position, if specified, must be the first argument, and is followed by a comma.
The value for position is not preceded by the keyword
To set the size of the gradient explicitly in WebKit and Opera, omit the shape, and specify
two values for the horizontal and vertical radii. For a circle, both values must be the same.
The browser-specific function for Firefox 15 and earlier doesn't support setting the size
The styles for the circular gradient in closest-side.html (see Figure 19-15 ) use both the browser-specific
functions and the standard syntax like this:
background-image: -moz-radial-gradient(100px 50px, circle closest-side, #C24704, #FFEB79