Getting Fancy - Jump Start CSS - page 144

no color stop positions defined, the first and last colors listed will default to positions of 0%
and 100%, respectively. Let's try defining some custom color stops:
width: 300px;
height: 300px;
background-image: linear-gradient(red 10%, green 70%,
blue 84%,
↵ yellow 90%);
}
Here, we've defined a percentage for each color. This tells the browser where on the element
to place the color stop. This code would render in the browser as shown in Figure 5.8 .
Figure 5.8. A linear gradient with custom-positioned color stops
Changing a Linear Gradient's Direction
In addition to color stops, we're also able to define the direction of the gradient, which, by
default, is vertical, from top to bottom. To define a custom direction for the gradient, just
include the direction prior to the set of defined color stops, before a comma. Here are some
other linear gradient examples with alternate directions specified:
.box-1 {
background-image: linear-gradient(to top, #87053e,
#560329);