HTML and CSS Reference
In-Depth Information
As we can see, by default, the gradient direction occurs vertically from top to bottom. For an
idea of how different colors in a linear gradient are distributed, here's another example, using
a rainbow of colors:
.box {
width: 300px;
height: 300px;
background-image: linear-gradient(red, green, blue,
yellow,
↵
purple, cyan, magenta, olive, brown);
}
Figure 5.7
shows what this would look like when rendered in the browser.
Figure 5.7. A ridiculous multicolored gradient that demonstrates color stops
That's a beauty, isn't it? Seriously, please don't ever do anything like that on your web pages!
This should, however, demonstrate clearly how multiple color stops are rendered. But there's
more to linear gradients than just defining colors.
Positions for Color Stops
As mentioned, when including colors in a linear gradient, the browser will distribute the col-
ors evenly across the element, filling in the transitional colors automatically by default. With
each color defined, however, we have the option to define a location for the color stop. With
