HTML and CSS Reference
In-Depth Information
Figure 5.12. An example of a radial gradient
As with linear gradients, radial gradients let you specify positions for the color stops. By de-
fault, the first color listed will be at 0% and starts in the center of the element. Further color
stops that don't have positions will distribute evenly moving outwards, with the final color
stoppositionedat100%.Sowecoulddefinemultiplecolorswithcustomcolorstopslikethis:
.box {
width: 300px;
height: 300px;
background-image: radial-gradient(red 10%, green 70%,
blue 84%,
↵
yellow 90%);
}
Again, this would create quite an ugly gradient, but it nicely demonstrates how to create
gradients with color stops and custom positions.
More Options for Radial Gradients
Prior to the defined color stops in a radial gradient, we have the option to include a size,
shape, position, and direction for the radial gradient. There are numerous options, so we
won't cover them in detail here, but let's look at an example:
