<gradient>

  • Revision slug: CSS/gradient
  • Revision title: gradient
  • Revision id: 41111
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 19 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.
    background: -moz-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.

Syntax

Specification

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

Browser compatibility

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.<br>  <pre>background: -moz-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.</li>
</ul>
<h2>Syntax</h2>
<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>
<h2>See also</h2>
Revert to this revision