CSS - <gradient>

Description  

The <gradient> CSS data type denotes a CSS <image> made of a progressive transition between two or more colors. A CSS gradient is not a CSS <color> but an image with no intrinsic dimensions; that is, it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the one of the element it applies to.

There are three kinds of color gradients:

• linear gradients, generated by the linear-gradient() function, where the color smoothly fades along an imaginary line.
  HTML

  Copy Code

  A rainbow made from a gradient

  CSS

  Copy Code

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

• radial gradients, generated by the radial-gradient() function. The more away from an origin a point is, the more far from the original color it is.
  HTML

  Copy Code

  Radial gradient

  CSS

  Copy Code

  body {
  background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent;
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
  }

• repeating gradients, which are fixed sized linear or radial gradients repeated as much as needed to fill the entire box.
  HTML

  Copy Code

  Repeating gradient

  CSS

  Copy Code

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

Like with any case involving interpolation of colors, gradients are calculated in the alpha-premultiplied color space. This prevents unexpected shades of grey to appear when both the color and the opacity are varying.

Browser Compatibility  

Each different gradient type has a different compatibility matrix. Please consult each individual article.

See Also  

• Using CSS gradients, <gradient>, linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-radial-gradient()

License