CSS - <gradient>

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.

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.
    A rainbow made from a gradient
    
    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.
    Radial gradient
      
    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.
    Repeating gradient
    
    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  

Specification

Specification Status Comment
CSS Image Values and Replaced Content Module Level 3
The definition of '<gradient>' in that specification.
Candidate Recommendation  

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/gradient