CSS — Gradients

Gradients are images

gradient values plug into background-image — no files, crisp at any resolution:

.banner {
    background-image: linear-gradient(to right, orange, pink);
}

What the browser displays

(A smooth horizontal blend from orange into pink across the element.)

linear-gradient — direction + stops

Direction options:

linear-gradient(to right, a, b);
linear-gradient(to bottom right, a, b);   /* diagonal */
linear-gradient(45deg, a, b);             /* any angle */
linear-gradient(to bottom, black, transparent);

Multiple colors = multiple stops:

linear-gradient(to right, red, yellow, lime, cyan, blue);
linear-gradient(to bottom, #0f172a 0%, #1e293b 60%, #334155 100%);

Hard stops create stripes (no blend):

repeating-linear-gradient(
    45deg,
    #eee 0 10px,
    #ddd 10px 20px
);   /* diagonal candy stripes */

radial-gradient — from a center point

.glow {
    background: radial-gradient(circle, teal 0%, transparent 70%);
}

.vignette {
    background: radial-gradient(circle at center,
        transparent 60%,
        rgba(0,0,0,0.5) 100%);
}

(A soft teal glow fading out; a photo-darkening vignette.)

Position the center with circle at top left, at 30% 40%, etc.

conic-gradient — around the clock

Sweeps like a clock hand:

.pie {
    background: conic-gradient(teal 0 70%, gold 70% 100%);
    border-radius: 50%;
}

(A two-slice pie chart: 70/30.)

Color-wheel spin:

conic-gradient(red, yellow, lime, cyan, blue, magenta, red);

The hero scrim recipe

The single most-used gradient on the web — dark overlay so text stays readable over photos:

.hero {
    background-image:
        linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.1)),
        url("mountain.jpg");
    background-size: cover;
    background-position: center;
}

Layered backgrounds: first listed paints ON TOP.

Gradient text

.fancy {
    background: linear-gradient(90deg, teal, purple);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

(Headline filled with a gradient instead of solid ink.)

Buttons & subtle UI

.btn-primary {
    background: linear-gradient(to bottom, #14b8a6, #0d9488);
}
.card-top {
    background: linear-gradient(to right, var(--brand), transparent);
    height: 4px;      /* accent line */
}

Taste note: gradients read as decoration — keep them subtle (close hues, low contrast) unless the brand is deliberately loud. Two close teals beat a rainbow.

Mini Practice

1. Four-direction banners of the same pair of colors.
2. Diagonal repeating stripes as a "loading" bar.
3. Radial glow behind a circular avatar.
4. Conic pie chart with three slices (add a third stop).
5. Hero photo + scrim + white headline; verify contrast.
6. Gradient-filled heading via background-clip:text.

Next: shadows →