CSS Tutorial
CSS Gradients
linear-gradient and radial-gradient paint a background with color stops. No image file required.
A background, not a color name
A gradient is an image as far as CSS is concerned. You set it on background-image, or on the shorthand background. It is not a value for color (text) and not a value forborder-color unless you use extra tricks. Start with the background of a header or a card.
Two functions cover almost every first layout: linear-gradient() along a line, andradial-gradient() from a center. Both take color stops — a color, then optionally a position such as 40%.
| Piece | Role |
|---|---|
linear-gradient(direction, stops) | Blend along a line |
to right, to bottom, 135deg | Where the line points |
radial-gradient(stops) | Blend from the center outward |
#0284c7 0%, #0d9488 100% | Color stops: color plus where it sits |
Click Try it in CSS under an example. That opens /css/try — a live page, not the HTML or Python editor. Swap teal for navy and the blend updates.
linear-gradient
The first argument can be a side (to right, to bottom left) or an angle.0deg points up. 90deg points right. Then list at least two colors. With no positions, the browser spaces the stops evenly.
Example
<style>
body {
font-family: Georgia, serif;
margin: 0;
color: #f0f9ff;
}
header {
background: linear-gradient(to right, #0c4a6e, #0d9488);
padding: 1.75rem 1.25rem 2rem;
}
h1 {
margin: 0 0 0.35rem;
}
p {
margin: 0;
opacity: 0.9;
}
</style>
<header>
<h1>Harbor studio</h1>
<p>Open 8–16. Tide prints at the desk.</p>
</header>White or near-white type sits on the dark sky-to-teal blend. If you lighten the gradient, darken the text. Contrast is still your job; the gradient does not compute it.
Color stops
A stop is a color and a position. Two stops at the same position make a hard edge — useful for a split banner. A stop in the middle holds a color longer before the next blend starts.
Example
<style>
body {
font-family: Georgia, serif;
margin: 1.25rem;
background: #f0f9ff;
color: #0c4a6e;
}
.bar {
height: 4.5rem;
border-radius: 0.85rem;
margin-bottom: 0.75rem;
}
.smooth {
background: linear-gradient(90deg, #0284c7 0%, #7dd3fc 50%, #0d9488 100%);
}
.split {
background: linear-gradient(90deg, #0c4a6e 50%, #0d9488 50%);
}
</style>
<h1>Harbor studio</h1>
<div class="bar smooth"></div>
<div class="bar split"></div>
<p>Top: three stops. Bottom: a hard join at 50%.</p>You can mix units: 2rem from the start, then 80%. Percentages follow the gradient line, not the whole page.
radial-gradient
A radial blend starts at a center (default: the middle of the box) and grows into an ellipse that fits the box. Name a shape if you want a circle even on a wide card: radial-gradient(circle, …). Optional position: circle at top left.
Example
<style>
body {
font-family: Georgia, serif;
margin: 1.25rem;
background: #e0f2fe;
color: #0c4a6e;
}
.card {
max-width: 22rem;
padding: 1.4rem 1.3rem;
border-radius: 1rem;
color: #f0f9ff;
background: radial-gradient(circle at top left, #38bdf8, #0c4a6e 62%);
}
h2 {
margin: 0 0 0.4rem;
}
</style>
<article class="card">
<h2>Harbor studio</h2>
<p>Morning light on the north wall. Open 8–16.</p>
</article>Busy gradients behind small type fail contrast checks. Keep body copy on a flat fill. Use a gradient on a header, a hero, or a decorative strip.
What to do next
Layer a gradient under a card, then lift the card with a shadow. box-shadow is the next chapter. You can stack background-image values with commas if you later need a gradient and a photo together — photo first or last depending on which should sit on top.
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Astronomy
A wash from teal to sky
linear-gradient paints a background. Angle 120deg, then colour stops. No image file. The text still needs contrast on the darkest stop.
radial-gradient is a spotlight. Use it for a lamp, not for body copy behind a novel.
Example
<style>
.hero { background: linear-gradient(120deg, #0f766e, #0369a1); color: #fff; padding: 1rem; }
</style>
<div class="hero">Observatory night desk</div>Chemistry
A pH strip as stops
Stops can mimic a legend. Still print the numbers. A gradient without labels is a pretty lie.
pH scale ~ 0–14 (aqueous, 25 °C)
Example
<style>
.strip { height: 28px; background: linear-gradient(90deg, #b91c1c, #ca8a04, #166534, #1d4ed8); }
</style>
<div class="strip" role="img" aria-label="pH colours from acid to alkali"></div>
<p>Red acid · green neutral · blue alkali</p>