Linear gradient

Learn linear gradients with linear-gradient().

What is a linear gradient?

A linear gradient blends two or more colors smoothly along a straight line. In CSS you write it with the linear-gradient() function. The simplest form is linear-gradient(blue, white) — blue at the top, fading into white below.

Gradients are used as backgrounds: background: linear-gradient(blue, white); is enough. You hand it a list of colors instead of one value, and the browser draws the blend.

Setting the direction

You give the gradient its direction as the first argument. With keywords: to top, to right, to bottom left. to top means the colors run from bottom to top.

For finer control, use an angle: 45deg, 90deg, 180deg. 0deg points up, 90deg right, 180deg down. Angles are measured counter-clockwise.

Color stops

Each color you add to a gradient is a color stop. By default, stops are spaced evenly: with two colors the blend sits in the middle, with three colors at one-third intervals.

To set a stop's position explicitly, write a percentage after the color, like blue 20%. This tells blue to start at the 20% mark. The blend stays smooth; only the start point shifts.

Exercise Add a linear gradient to the hero background

Define a background for the .hero selector. The value must be a linear-gradient() function with to right as the direction and navy and teal as colors. Use only the background property.

Show example solution

/* add gradient to hero background */
.hero {
  background: linear-gradient(to right, navy, teal);
}

Test yourself

Which form gives the default (top to bottom) direction?
```
background: linear-gradient(blue, white);
```
- List only the colors, with no direction
- Write to top
- Write to left
- Write 45deg
Show answer

List only the colors, with no direction — Correct. Without a direction, the default is to bottom, top to bottom.

Write the horizontal direction

background: linear-gradient(____, blue, white);

Show answer

background: linear-gradient(to right, blue, white);

Next lesson: Radial gradient

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies