Linear Gradients
A gradient is an image you generate with code instead of fetching from a server. Master linear-gradient — the workhorse of every modern landing page.
Step 1 of 3
Gradients are images made of colour stops
The function linear-gradient() generates an image that fades from one colour to another along a straight line. Because the result is an image, you use it with background-image, just like a photo.
Anatomy: linear-gradient(direction, color1, color2, ...). The direction can be a keyword (to right, to bottom, to bottom right) or an angle (45deg, 180deg). Each colour after that is a 'stop'. With two stops the gradient fades smoothly between them; with more stops you get bands.
Think of it this way: It is a sunset. The sky fades from blue at the top, through orange, into deep red near the horizon. Each colour you remember from a sunset is a 'stop'; the gradient fills in the smooth transitions.
Tip
A gradient is an image. So background-image: linear-gradient(...) is correct, not background-color: linear-gradient(...).
Learn more on MDN
HTMLREAD ONLY
PREVIEW