Creating Gradients Without Images - Beginning CSS3 - page 419

Setting the Angle of the Gradient Line
You can use an angle instead of keywords to set the direction of the gradient line. Specifying the angle in degrees
with the deg unit of measurement is simple, but there are two complicating factors:

• In all browsers, most angles produce starting and ending points outside the gradient box.

linear-gradient() use a different

• Browsers that require a browser-specific prefix with

coordinate system from the final specification.

Standard Syntax
In the standard syntax, 0deg points directly upward. Larger angles move in a clockwise direction, as shown in
Figure 19-11 .

0°

330° 30°

300° 60°

270° 90°

240° 120°

210° 150°

180°

Figure 19-11. CSS angles follow the same coordinates as a compass

The angle is calculated from the center of the gradient box, and the gradient line stretches in both directions.
You can use negative values for a counterclockwise angle: -45deg has the same meaning as 315deg .

■ Note Browsers automatically convert out-of-range angles to the correct value between 0° and 360°.

The gradient in linear_5.html is set at 135° like this:

background-image: linear-gradient( 135deg , #C24704, #FFEB79);

Setting the angle of the gradient like this locates the starting and ending points outside the gradient box.
Figure 19-12 shows how they are calculated.
Starting from the center, the gradient line extends at the specified angle. The ending point is where a line at
right-angles to the gradient line would intersect with the nearest corner of the gradient box. The starting point is
calculated in the same way, but in the opposite direction.