CSS Gradients

CSS Gradients

CSS gradients create smooth transitions between two or more colors without requiring an image file.

A gradient is generated by the browser and can be used anywhere CSS accepts an image, including an element's background. CSS provides linear, radial, conic, and repeating gradients, giving you control over the colors, direction, shape, and position of the transition.

Gradients Are CSS Images

CSS gradients are generated images rather than CSS colors. For backgrounds, a gradient is therefore assigned to background-image rather than background-color.

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

The browser creates the gradient when the page is rendered, so no separate JPG, PNG, or other image file is required.

Because gradients are images, they can also work with background properties such as background-size, background-position, and background-repeat.

Gradient Color Stops

A gradient contains two or more color stops. These define the colors that appear along the gradient line or around the gradient shape.

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

This gradient contains two color stops. The browser creates a smooth transition from steelblue to lightblue.

Additional colors can be added to create more complex transitions.

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

Color stops can also be given positions to control where colors appear and where transitions occur.

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

Linear Gradients

The linear-gradient() function creates a color transition along a straight line.

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

The gradient can run vertically, horizontally, diagonally, or at a specific angle.

Linear gradients are covered in detail in the next tutorial.

Radial Gradients

The radial-gradient() function creates a gradient that radiates outward from a central point.

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

Radial gradients can use circular or elliptical shapes, and their center can be positioned within the element.

Conic Gradients

The conic-gradient() function creates color transitions that rotate around a center point.

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

Instead of transitioning along a straight line or outward from the center, the colors progress around the center of the gradient.

Repeating Gradients

Repeating gradient functions repeat a defined gradient pattern to fill the available area.

.box {
  background-image: repeating-linear-gradient(
    45deg,
    steelblue 0 20px,
    lightblue 20px 40px
  );
}

CSS provides repeating versions of linear, radial, and conic gradients. They can be used to create stripes, rings, patterns, and other repeated effects without separate image files.

Gradient Colors

Gradient color stops can use CSS color values such as named colors, hexadecimal values, RGB, HSL, HWB, and colors with alpha transparency.

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

Using colors with alpha transparency allows backgrounds or other gradient layers underneath to remain visible.

Layering Gradients

Because gradients are CSS images, they can be layered with other gradients or image files using multiple backgrounds.

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

The gradient is listed first, so it is painted above the photograph. Its transparent colors allow the image underneath to remain visible.

This technique is commonly used to add a color or darkening overlay without modifying the original image file.

CSS Gradient Example

The following editor displays linear, radial, conic, and repeating gradients so you can compare the basic shapes and directions of each type.

.linear {
  background-image: linear-gradient(to right, steelblue, lightblue);
}
.radial {
  background-image: radial-gradient(lightblue, steelblue);
}
.conic {
  background-image: conic-gradient(steelblue, lightblue, steelblue);
}
.repeating {
  background-image: repeating-linear-gradient(45deg, steelblue 0 20px, lightblue 20px 40px);
}

Open the example in the editor and change the colors or gradient functions to see how each type is generated directly by CSS.