HTML and CSS Reference
In-Depth Information
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
35%, #00ADA7);
■
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.
Caution
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-
corner
.
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.
at
.
•
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
explicitly.
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
35%, #00ADA7);
