Setting Backgrounds & Gradients - Learn to Code HTML and CSS: Develop and Style Websites - page 139

Figure 7.4 A linear gradient background transitioning from the top to the bottom of an
element
Linear gradients are identified by using the linear-gradient() function within the
background or background-image property. The linear-gradient() func-
tion must include two color values, the first of which will be the beginning color value and
the second of which will be the ending color value. The browser will then handle the trans-
ition between the two colors.
Before any gradient backgrounds are identified, we'll also put in a default background
property with a solid color. The solid color is to be used as a fallback should a browser not
support gradient backgrounds.
Changing the Direction of a Gradient Background
By default, linear gradient backgrounds move from the top to the bottom of an element,
transitioning smoothly between the first color value and the second. This direction,
however, may be changed with the use of keywords or a degree value stated before any
color values.
For example, should we want a gradient to move from the left of an element to the right, we
can use the keyword value to right to identify the direction in which the linear gradient
should progress. Keyword values may also be combined. If we want the gradient to move
from the left top to the right bottom of an element, we can use the keyword value of to
right bottom (see Figure 7.5 ).