CSS Gradients
Solid colors and photos cover many backgrounds. Sometimes you want a smooth blend between colors — a soft banner, a glowing card, a sky without shipping a huge image. That blend is a gradient, drawn by CSS as a special kind of background-image.
What is a CSS gradient?
A gradient is an image the browser generates — not a JPG you download. You describe it with functions like linear-gradient() and radial-gradient(), then plug that into background-image (or the background shorthand). The result paints behind content just like a photo background.
Kinds at a glance
Start with these two. Fancy conic gradients can wait until you need them.
📊 Everyday CSS gradient kinds
| Kind | Function | Everyday use |
|---|---|---|
| Linear | linear-gradient(…) |
Banners, buttons, section washes left→right or top→bottom |
| Radial | radial-gradient(…) |
Soft spotlight cards, circular fades from the center |
| Direction words | to right, to bottom |
Readable linear direction without angles |
| Angle | 45deg, 90deg |
Precise tilt when words are not enough |
| Color stops | teal 0%, navy 100% |
Where each color sits along the blend |
Linear: two colors, left to right
The simplest linear gradient needs a direction and at least two colors. CSS blends between them.
Simple left-to-right linear gradient
css.banner {
background-image: linear-gradient(to right, #0f766e, #0f172a);
color: #f8fafc;
padding: 2rem;
}Read the function
to right is the direction. #0f766e starts; #0f172a ends. The browser fills everything in between.
Angles and more stops
Use an angle for a diagonal wash, and add middle stops when you want a richer blend.
Angled linear with three stops
css.hero {
background-image: linear-gradient(
135deg,
#0f766e 0%,
#134e4a 45%,
#0f172a 100%
);
color: white;
min-height: 10rem;
padding: 2rem;
}Stop habit
A color stop is “this color at this place.” Percentages are easy to read. You can also omit positions and let the browser space colors evenly.
Radial: fade from the center
radial-gradient() spreads outward from a center point — useful for soft cards and focus glows.
Soft radial card
css.card {
background-image: radial-gradient(circle at center, #ccfbf1, #0f766e);
color: #042f2e;
padding: 1.5rem;
}Circle tip
circle at center keeps the shape round and centered. You can aim at top or at 20% 30% later when you need a spotlight elsewhere.
Gradients live on background-image
Do not put a gradient function in color — that property paints text. Gradients are background images, so they pair with the same habits you learned for photos (text contrast still matters).
Shorthand with a fallback color
css.panel {
background: #0f172a linear-gradient(to bottom, #115e59, #0f172a);
color: #ecfdf5;
padding: 1.5rem;
}Try it yourself
- Make a
.bannerwithlinear-gradient(to right, #0f766e, #0f172a)and light text. - Change direction to
to bottom— notice the blend axis flip. - Build a
.herowith135degand three stops (teal → mid → navy). - Add a
.cardwithradial-gradient(circle at center, #ccfbf1, #0f766e). - Optional: put a solid fallback color before the gradient in the
backgroundshorthand.
Common mistakes
- Writing
color: linear-gradient(…)— gradients are not text color - Using only one color stop — you need at least two colors to blend
- Forgetting this is a
background-image(contrast and stacking still apply) - Rainbow overload on every section — soft two- or three-stop washes read more professional
- Expecting a gradient to replace meaningful photos (product shots still need real images)
Summary
- Gradients are browser-made images used as backgrounds
linear-gradient()blends along a line;radial-gradient()from a center- Direction words, angles, and color stops control the look
- Attach them with
background-imageorbackgroundshorthand - Keep contrast strong for text on top
- Practice one linear banner and one radial card before stacking tricks
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top