---
title: repeating-linear-gradient
slug: Web/CSS/repeating-linear-gradient()
translation_of: Web/CSS/repeating-linear-gradient()
---
<p>{{ CSSRef() }}</p>

<h2 id="Summary">Summary</h2>

<p>A função CSS <code>repeating-linear-gradient</code> cria uma {{cssxref("&lt;image&gt;")}} de repetidos gradientes. Isso funciona da mesma forma, e recebe os mesmos argumentos dos gradientes lineares básicos, como descrito em {{ cssxref("linear-gradient") }}, mas ele automaticamente repete as paradas das cores infinitamente em ambas as direções, com suas posições trocadas por múltiplos da diferença entre a posição da última parada de cor e a posição da primeira.</p>

<p>The consequence is that an end color of a gradient always coincide with a start color. If both are not identical, this will result in a sharp transition.</p>

<p>Like any other gradient, a repeating CSS linear gradient is not a CSS <span class="lang lang-en"><code><a href="color_value" rel="custom">&lt;color&gt;</a></code> </span> 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>Mozilla currently only supports CSS gradients as values of the {{ Cssxref("background-image") }} property, as well as within the shorthand {{ Cssxref("background") }}. You specify a gradient value instead of an image URL.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="twopartsyntaxbox notranslate">Formal grammar: repeating-linear-gradient(  [ <a href="/en-US/CSS/angle" title="angle">&lt;angle&gt;</a> | to &lt;side-or-corner&gt; ,]? &lt;color-stop&gt; [, &lt;color-stop&gt;]+ )
                                            \---------------------------------/ \----------------------------/
                                              Definition of the gradient line         List of color stops

                              where <code>&lt;side-or-corner&gt; = [left | right] || [top | bottom]</code>
                                and <code>&lt;color-stop&gt;     = &lt;color&gt; [ &lt;percentage&gt; | &lt;length&gt; ]?</code>
</pre>

<pre class="notranslate">repeating-linear-gradient( 45deg, blue, red );           /* A repeating gradient on 45deg axe starting blue and finishing red */
repeating-linear-gradient( to left top, blue, red);      /* A repeating gradient going from the bottom right to the top left
                                                            starting blue and finishing red */

repeating-linear-gradient( 0deg, blue, green 40%, red ); /* A repeating gradient going from the bottom to top, starting blue,
                                                            being green after 40% and finishing red */
</pre>

<h3 id="Values">Values</h3>

<dl>
 <dt><code>&lt;side-or-corner&gt;</code></dt>
 <dd>Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, <code>left</code> or <code>right</code>, and the second one the vertical side, <code>top</code> or <code>bottom</code>. The order is not relevant and each of the keyword is optional.<br>
 The values <code>to top</code>, <code>to bottom</code>, <code>to left</code> and <code>to right</code> are translated into the angles <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code> respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <code>&lt;color-stop&gt;</code> will exactly apply to the corner point. This is sometimes called the "<em>magic corner</em>" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.</dd>
 <dt><code>&lt;angle&gt;</code></dt>
 <dd>An angle of direction for the gradient. See {{ cssxref("&lt;angle&gt;") }}.</dd>
 <dt><code>&lt;color-stop&gt;</code></dt>
 <dd>This value is comprised of a {{cssxref("&lt;color&gt;")}} value, followed by an optional stop position (either a percentage between 0% and 100% or a {{cssxref("&lt;length&gt;")}} along the gradient axis).<br>
 Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<pre class="brush: css notranslate">background: repeating-linear-gradient(to bottom right, red, red 5px, white 5px, white 10px);
</pre>

<h2 id="Specifications" name="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()') }}</td>
   <td>{{ Spec2('CSS3 Images') }}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>

<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support (on {{ cssxref("background") }} and {{ cssxref("background-image") }})</td>
   <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}<sup><a href="#bc3">[3]</a></sup><br>
    {{ CompatGeckoDesktop("16") }}</td>
   <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td>
   <td>10.0 <sup><a href="#bc1">[1]</a></sup></td>
   <td>11.10{{ property_prefix("-o") }} <sup><a href="#bc3">[3]</a></sup></td>
   <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td>
  </tr>
  <tr>
   <td>On any properties that accept {{cssxref("&lt;image&gt;")}}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
  <tr>
   <td><a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/">Legacy webkit syntax</a>{{ non-standard_inline() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>3{{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>4.0{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup></td>
  </tr>
  <tr>
   <td>Legacy <em>from </em>syntax (without <code>to</code>){{ non-standard_inline() }}</td>
   <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} <sup><a href="#bc4">[4]</a></sup><br>
    Removed in {{ CompatGeckoDesktop("16") }}</td>
   <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td>
   <td>10.0</td>
   <td>11.10{{ property_prefix("-o") }}<sup><a href="#bc4">[4]</a></sup></td>
   <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2%3E">[2]</a></sup></td>
  </tr>
  <tr>
   <td><code>to </code>syntax</td>
   <td>{{ CompatGeckoDesktop("10") }}{{ property_prefix("-moz") }}<sup><a href="#bc4">[4]</a></sup><br>
    {{ CompatGeckoDesktop("16") }}</td>
   <td>{{ CompatNo() }}</td>
   <td>10.0</td>
   <td>11.60{{ property_prefix("-o") }}<sup><a href="#bc4">[4]</a></sup><br>
    Presto 2.12 will remove the prefix.</td>
   <td>{{ CompatNo() }}</td>
  </tr>
 </tbody>
</table>

<p><sup><a name="bc1">[1]</a></sup> Internet Explorer 5.5 through 9.0 supports proprietary <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p>

<p><sup><a name="bc2">[2]</a></sup> WebKit since 528 supports the legacy <a class="external" href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html"><code>-webkit-gradient(linear,…)</code> function</a>. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in <code>-webkit-linear-gradient()</code>. You can achieve the same effect by offsetting the color stops.</p>

<p><sup><a name="bc3">[3]</a></sup> Gecko, Opera &amp; Webkit considers {{cssxref("&lt;angle&gt;")}} to start to the right, instead of the top. I.e. it considered an angle of to start to the right, instead of the top. I.e. it considered an angle of <code>0deg</code> as a direction indicator pointing to the right. This is different from the latest specification where an angle of <code>0deg</code> as a direction indicator points to the top.</p>

<p><sup><a name="bc4">[4]</a></sup> Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the <code>to</code> keyword, and effectively considered as a <em>from</em> position. The <code>to</code> syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:</p>

<pre class="notranslate">-moz-repeating-linear-gradient(to top left, blue, red);</pre>

<p>is the same as:</p>

<pre class="notranslate">-moz-repeating-linear-gradient(bottom right, blue, red);</pre>

<p>The legacy syntax, without <code>to</code>, is planned to go away when the prefix is removed.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en/CSS/Using_CSS_gradients" title="en/Using gradients">Using CSS gradients</a>, {{ cssxref("radial-gradient", "radial-gradient()") }}, {{ cssxref("linear-gradient", "linear-gradient()") }}, {{ cssxref("repeating-radial-gradient", "repeating-radial-gradient()") }};</li>
 <li>Some properties where it can be used: {{ cssxref("background-image") }}, {{ cssxref("background") }}.</li>
</ul>