<gradient>

The <gradient> CSS data type is a special type of <image> that consists of a progressive transition between two or more colors.

A CSS gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element to which it applies.

Syntax

Gradient functions

The <gradient> data type is defined with one of the function types listed below.

Linear gradient

Transitions colors progressively along an imaginary line. Generated with the linear-gradient() function.

.linear-gradient {
  background: linear-gradient(to right,
      red, orange, yellow, green, blue, indigo, violet);
}

Radial gradient

Transitions colors progressively from a center point (origin). Generated with the radial-gradient() function.

.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}

Repeating gradient

Repeats a gradient as much as necessary to fill the entire element. Generated with the repeating-linear-gradient() and repeating-radial-gradient() functions.

.linear-repeat {
  background: repeating-linear-gradient(to top left,
      lightpink, lightpink 5px, white 5px, white 10px);
}

.radial-repeat {
  background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
}

Interpolation

As with any interpolation involving colors, gradients are calculated in the alpha-premultiplied color space. This prevents unexpected shades of gray from appearing when both the color and the opacity are changing. (Be aware that older browsers may not use this behavior when using the transparent keyword.)

Specification

Browser compatibility

Each gradient type has different compatibility. Please consult the article for each specific type for more information.

See also

• Using CSS gradients
• Gradient functions: linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-radial-gradient()