<gradient>

  • Revision slug: CSS/gradient
  • Revision title: gradient
  • Revision id: 41116
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 16 words added

Revision Content

The <gradient> CSS data type denotes a CSS {{ xref_cssimage() }} made of a progressive transition between two or more colors. There are several types of colors gradients:

  • linear gradients, generated by the {{ cssxref("linear-gradient", "linear-gradient()") }} function, where the color smoothly fades along an imaginary line.
    A rainbow made from a gradient
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    
  • radial gradients, generated by the {{ cssxref("radial-gradient", "radial-gradient()") }} function. The more away from an origin a point is, the more far from the original color it is.
    Radial gradient
    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
    background: repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
    

Specification

Specification Status Comment
CSS Image Value and Replaced Content Module Level 3 {{ Spec2('CSS3 Images') }}  

Browser compatibility

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

See also

Revision Source

<p>The <code>&lt;gradient&gt;</code> <a href="/en/CSS" title="CSS">CSS</a> data type denotes a CSS {{ xref_cssimage() }} made of a progressive transition between two or more colors. There are several types of colors gradients:</p>
<ul> <li><em>linear gradients</em>, generated by the {{ cssxref("linear-gradient", "linear-gradient()") }} function, where the color smoothly fades along an imaginary line. <div style="background-image: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); 
background-image: -moz-linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
background-image: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
background-image: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
background-image: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); border: 1px solid black;">A rainbow made from a gradient</div> <pre>background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
</pre> </li> <li><em>radial gradients</em>, generated by the {{ cssxref("radial-gradient", "radial-gradient()") }} function. The more away from an origin a point is, the more far from the original color it is. <div style="border: 1px solid rgb(51, 51, 51); background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent;">Radial gradient</div> <pre>background: radial-gradient(red, yellow, rgb(30, 144, 255));
</pre> </li> <li><em>repeating gradients</em>, which are fixed sized linear or radial gradients repeated as much as needed to fill the entire box. <div style="background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px); border: 1px solid black;">Repeating gradient</div> <pre>background: repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
</pre> </li>
</ul>
<h2>Specification</h2>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">CSS Image Value and Replaced Content Module Level 3</a></td> <td>{{ Spec2('CSS3 Images') }}</td> <td> </td> </tr> </tbody>
</table>
<h2>Browser compatibility</h2>
<p>Each different gradient type has a different compatibility matrix. Please consult each individual article.</p><h2>See also</h2>
Revert to this revision