MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Summary

The <gradient> CSS data type is a CSS <image> made 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 it applies to.

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 varying (except while using transparent keyword in older browsers).

Gradient Types

Linear gradient

Generated with the linear-gradient() function. The color smoothly transitions along an imaginary line.

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

Radial gradient

Generated with the radial-gradient() function. The further from the origin a point is, the more different it is from the origin's color and the more similar it is to the next color.

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

Repeating gradient

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

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

Specification

Specification Status Comment
CSS Image Values and Replaced Content 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

Document Tags and Contributors

 Last updated by: jonjohnjohnson,