HTML and CSS Reference
In-Depth Information
Position:
This determines the center of the circle or ellipse. The value is expressed in
the same way as
background-position
(see Chapter 8), preceded by the keyword
at
. If
omitted, it defaults to
at center
.
Color stops:
A comma-separated list of colors with optional positions along the
gradient ray starting at the center.
The only required argument is the list of color stops. All other arguments are optional.
Setting the Shape of the Gradient
You can set the shape of the gradient explicitly by using the keyword
circle
or
ellipse
.
If you omit the shape, it defaults to
circle
if the size is a single length. In all other cases, it defaults
to
ellipse
.
Setting the Size of the Gradient
You can set the size of the circle or ellipse explicitly or by using keywords.
A circular gradient accepts only a single length, which sets its radius.
An elliptical gradient accepts two values, which can be either lengths or percentages. The first value sets the
ellipse's horizontal radius. The second one sets its vertical radius. Percentage values are relative to the width and
height of the gradient box, respectively.
■
You cannot use a percentage to set the size of a circular gradient because it's ambiguous whether the
percentage should be relative to the width or height of the gradient box.
Caution
Both shapes accept any of the following keywords to determine their size:
closest-side
farthest-side
closest-corner
farthest-corner
To demonstrate the effect of these keywords, Figures
19-15
through
19-18
apply them to a circular gradient
and an elliptical one. The center of each gradient is
100px
from the left and
50px
from the top. They all use the
same color stops:
#C24704, #FFEB79 35%, #00ADA7
■
Note
The code for each example is in a file named after the keyword, for example, closest-side.html.
Figure
19-15
shows the effect of
closest-side
. The outer edge of the circular gradient exactly meets the side
of the gradient box closest to the circle's center—in other words, the top. The outer edge of the elliptical gradient
meets the closest side in the horizontal and vertical axes—in this case, the left and top.
