CSS Linear Gradients

CSS Linear Gradients

The CSS linear-gradient() function creates a smooth transition between two or more colors along a straight line.

You can control the direction or angle of the gradient, add multiple colors, position individual color stops, create transparent transitions, and place sharp color changes within the same gradient.

Basic linear-gradient()

A basic linear gradient requires at least two colors.

.box {
  background-image: linear-gradient(steelblue, lightblue);
}

When no direction or angle is specified, the gradient runs from top to bottom. In this example, steelblue begins at the top and gradually transitions to lightblue at the bottom.

The browser calculates the intermediate colors needed to create the smooth transition.

Gradient Direction

Directional keywords can specify where the gradient line points. The direction begins with the word to.

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

This gradient begins with steelblue on the left and transitions toward lightblue on the right.

Common directions include:

Gradient Angles

An angle provides more precise control over the direction of a linear gradient. Angles are commonly written using degrees.

.box {
  background-image: linear-gradient(45deg, steelblue, lightblue);
}

For CSS linear gradients, 0deg points upward, 90deg points to the right, 180deg points downward, and 270deg points to the left.

Angles between these values create diagonal gradients.

Multiple Colors

A linear gradient can contain more than two colors. Each additional color creates another color stop along the gradient.

.box {
  background-image: linear-gradient(to right, steelblue, lightblue, white);
}

The browser distributes color stops without explicit positions evenly along the gradient.

Any valid CSS color value can be used, so a gradient can combine named colors, hexadecimal values, RGB, HSL, HWB, and other supported color formats.

Color Stop Positions

Color stops can include positions that control where colors appear along the gradient line.

.box {
  background-image: linear-gradient(
    to right,
    steelblue 0%,
    lightblue 70%,
    white 100%
  );
}

The gradient begins with steelblue at 0%, reaches lightblue at 70%, and reaches white at 100%.

Moving a stop changes the amount of space available for the transitions on either side of that color.

Hard Color Stops

Gradient colors do not always have to blend gradually. Adjacent color stops can be placed at the same position to create a sharp transition.

.box {
  background-image: linear-gradient(
    to right,
    steelblue 0%,
    steelblue 50%,
    lightblue 50%,
    lightblue 100%
  );
}

Both middle stops occur at 50%, so there is no space for a gradual transition between steelblue and lightblue. The result is a hard dividing line.

A color can also specify two positions to create a solid band within a gradient.

.box {
  background-image: linear-gradient(
    to right,
    steelblue 0% 40%,
    lightblue 40% 100%
  );
}

Transparent Gradients

Colors with alpha transparency can create gradients that fade into or reveal backgrounds underneath them.

.box {
  background-image: linear-gradient(
    to right,
    rgb(0 136 204),
    rgb(0 136 204 / 0%)
  );
}

The first color is opaque while the second uses an alpha value of 0%, producing a transition toward full transparency.

Transparent gradients are especially useful when gradients are layered with other backgrounds.

Linear Gradient Backgrounds

A linear gradient can be used by itself or combined with other CSS background layers.

.box {
  background-image:
    linear-gradient(to right, rgb(0 0 0 / 60%), rgb(0 0 0 / 0%)),
    url("images/landscape-1200x800.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

The gradient is the first background layer, so it appears above the photograph. The transparent portion of the gradient allows the image underneath to remain visible.

This technique can create an area with stronger contrast for text while preserving the background image.

Linear Gradient Example

The following example creates a simple left-to-right gradient. Change the direction, angle, colors, or color stop positions to see how each part of linear-gradient() affects the result.

.box {
  background-image: linear-gradient(
    to right,
    steelblue 0%,
    lightblue 100%
  );
}