🎓 A1Learner
🔍

CSS Gradients

A gradient is a background image that blends one colour into another. The browser paints the blend across the element.

A gradient to the right

The to right words aim the blend sideways. The colour moves from red on the left to yellow on the right.

.box {
  background-image: linear-gradient(to right, red, yellow);
}

Three stops on a diagonal

Three colours give two blends in a row. The direction aims the line at the bottom right corner.

.box {
  background-image: linear-gradient(to bottom right, red, yellow, blue);
}

A radial gradient

The circle word shapes the blend as a circle. Red sits at the centre and yellow sits at the edge.

.box {
  background-image: radial-gradient(circle, red, yellow);
}

Example

.box {
  background-image: linear-gradient(to right, red, yellow);
}
h1 {
  background-image: linear-gradient(to bottom, blue, white);
}
#demo {
  background-image: radial-gradient(circle, yellow, green);
}

Key points

  • linear-gradient blends colours along a straight line.
  • radial-gradient blends colours outwards from a centre point.
  • A colour stop can carry a position, like red 0% or blue 100%.
  • A gradient sits over any background-color on the same element.
  • A gradient counts as an image, and background-size sizes it.
  • A gradient is set with background-image, not with color.

In this example, the box gets a sideways blend from red to yellow. The heading gets a downward blend from blue to white. The demo paragraph gets a radial blend, with yellow at the centre and green at the edge. Each rule sets background-image, because a gradient is an image.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Which property sets a gradient on an element?