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.


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);


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 Status Comment
CSS Images Module Level 4
The definition of '<gradient>' in that specification.
Working Draft Adds conic-gradient
CSS Images Module Level 3
The definition of '<gradient>' in that specification.
Candidate Recommendation Initial definition.

Browser compatibility

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

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.