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

Figure 7.8 A linear gradient background, including three colors and their unique loca-
tions, transitioning from the left to the right of an element
Unless specified otherwise, the first color stop will be positioned at 0% , and the last color
stop will be positioned at 100% .
Gradient Background Example
Using the same success alert message from before, we'll swap out the old background im-
age for a linear gradient background image.
For this we'll include two background properties. The first background property
specifies a solid color hexadecimal value, which serves as a fallback should a browser
not support linear gradient backgrounds. The second background property includes
the linear-gradient() function, which identifies a green gradient background that
transitions from the top of the element to the bottom of the element ( see Figure 7.9 ) .
Figure 7.9 A success alert message including a linear gradient background image
HTML