<gradient>

  • Revision slug: CSS/gradient
  • Revision title: gradient
  • Revision id: 294135
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

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

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);
    

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.

Specification

Specification Status Comment
{{ SpecName('CSS3 Images', '#gradients', '<gradient>') }} {{ Spec2('CSS3 Images') }}  

Browser compatibility

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

See also

  • CSS Reference
  • Using CSS gradients, {{ xref_cssgradient() }}, {{ cssxref("linear-gradient", "linear-gradient()") }}, {{ cssxref("radial-gradient", "radial-gradient()") }}, {{ cssxref("repeating-linear-gradient", "repeating-linear-gradient()") }}, {{ cssxref("repeating-radial-gradient", "repeating-radial-gradient()") }};
  • CSS Data Types: {{ CSSDataTypes() }}.

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<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. A CSS gradient is not a CSS {{ xref_csscolorvalue() }} but an image with <a href="/en/CSS/image#no_intrinsic" title="en/CSS/image#no_intrinsic">no intrinsic dimensions</a>; that is, it has no natural or preferred size, nor ratio. Its concrete size will match the one of the element it applies to.</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>
<p>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.</p>
<h2 id="Specification">Specification</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th>Specification</th>
      <th>Status</th>
      <th>Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Images', '#gradients', '&lt;gradient&gt;') }}</td>
      <td>{{ Spec2('CSS3 Images') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>Each different gradient type has a different compatibility matrix. Please consult each individual article.</p>
<h2 id="See_also">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() }}, {{ cssxref("linear-gradient", "linear-gradient()") }}, {{ cssxref("radial-gradient", "radial-gradient()") }}, {{ cssxref("repeating-linear-gradient", "repeating-linear-gradient()") }}, {{ cssxref("repeating-radial-gradient", "repeating-radial-gradient()") }};</li>
  <li>CSS Data Types: {{ CSSDataTypes() }}.</li>
</ul>
Revert to this revision