MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Revision 41118 of <gradient>

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

Revision Content

The <gradient> CSS data type denotes a CSS {{ xref_cssimage() }} made of a progressive transition between two or more colors. CSS gradients are not CSS {{ xref_csscolor() }} but images with no intrinsic dimensions, i. e. they have no natural or preferred size, or ratio.

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. CSS gradients are not CSS {{ xref_csscolor() }} but images with no intrinsic dimensions, i. e. they have no natural or preferred size, or ratio.</p>
<p>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>
<ul> <li><a href="/en/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li> <li><a href="/en/CSS/Using_CSS_gradients" title="Using gradients">Using CSS gradients</a>, {{ xref_cssgradient() }}, <a href="/en/CSS/linear-gradient" title="linear-gradient"><code>linear-gradient()</code></a>, <a href="/en/CSS/radial-gradient" title="radial-gradient"><code>radial-gradient()</code></a>, <a href="/en/CSS/repeating-linear-gradient" title="repeating-linear-gradient"><code>repeating-linear-gradient()</code></a>, <a href="/en/CSS/repeating-radial-gradient" title="repeating-radial-gradient"><code>repeating-radial-gradient()</code></a>;</li> <li>CSS Data Types: {{ CSSDataTypes() }}.</li>
</ul>
Revert to this revision