repeating-linear-gradient

  • Revision slug: CSS/repeating-linear-gradient
  • Revision title: repeating-linear-gradient
  • Revision id: 14039
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 473 words added, 87 words removed

Revision Content

{{ SeeCompatTable() }}

This works similarly to the standard linear gradients as described by {{ cssxref("linear-gradient") }}, but it automatically repeats the color stops infinitely in both directions, with their positions shifted by multiples of the difference between the last color stop's position and the first one's position.

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.

Syntax

repeating-linear-gradient( [ [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )

Vendor prefixes: See the compatibility table below for detail on the vendor prefixes you'll need to use for gradients.

Where:

<color-stop>

{{ Xref_csscolorvalue() }} [ {{ Xref_csspercentage() }} | {{ Xref_csslength() }} ]

Values

<side-or-corner>
Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keyword is optional.
The values to top, to bottom, to left and to right are translated into the angles 0deg, 180deg, 270deg, 90deg 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 <color-stop> will exactly apply to the corner point. This is sometimes called the "magic corner" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.
<angle>
An angle of direction for the gradient. See {{ Xref_cssangle() }}.
<color-stop>
This value is comprised of a {{ Xref_csscolorvalue() }} value, followed by an optional stop position (either a percentage between 0% and 100% or a {{ Xref_csslength() }} along the gradient axis).
Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.

Example

background: repeating-linear-gradient(to bottom right, red, red 5px, white 5px, white 10px);

Browser compatibility

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support {{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} {{ bug("479220") }} [3] 10.0 (534.16){{ property_prefix("-webkit") }} [2][3] 10.0 {{ property_prefix("-ms") }} 11.10{{ property_prefix("-o") }} [3] 5.1{{ property_prefix("-webkit") }}[2][3]
Legacy webkit syntax{{ non-standard_inline() }} {{ CompatNo() }} 3{{ property_prefix("-webkit") }} [2] {{ CompatNo() }} [1] {{ CompatNo() }} 4.0{{ property_prefix("-webkit") }}[2]
Legacy from syntax (without to) {{ non-standard_inline() }} {{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [4] 10.0 (534.16){{ property_prefix("-webkit") }} [2] 10.0 {{ property_prefix("-ms") }} 11.10{{ property_prefix("-o") }} 5.1{{ property_prefix("-webkit") }}[2]
to syntax

{{ CompatGeckoDesktop("10") }}{{ property_prefix("-moz") }} {{ bug("685400") }} [4]

{{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

[1] Internet Explorer 5.5 through 8.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

[2] WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. 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 -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

[3] Gecko, Opera & Webkit considers {{ xref_cssangle("") }} to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top.

[4] Firefox 3.6 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a from position. The to syntax has been added in Firefox 10, without removing the deprecated syntax and translation between the two is trivial:

-moz-repeating-linear-gradient(to top left, blue, red);

is the same as:

-moz-repating-linear-gradient(bottom right, blue, red);

The legacy syntax, without to, is planned to go away when the prefix will be removed.

See also

Revision Source

<p>{{ SeeCompatTable() }}</p>
<p>This works similarly to the standard linear gradients as described by {{ cssxref("linear-gradient") }}, but it automatically repeats the color stops infinitely in both directions, with their positions shifted by multiples of the difference between the last color stop's position and the first one's position.</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>Syntax</h2>
<pre>repeating-linear-gradient( [ [ <a href="mks://localhost/en/CSS/angle" title="angle"><em>&lt;angle&gt;</em></a> | to <em>&lt;side-or-corner&gt;</em> ,]? <em>&lt;color-stop&gt;</em> [, <em>&lt;color-stop&gt;</em>]+ )
</pre>
<p><strong>Vendor prefixes: </strong>See the compatibility table below for detail on the vendor prefixes you'll need to use for gradients.</p>
<p>Where:</p>
<dl> <dt>&lt;color-stop&gt;</dt> <dd> <p>{{ Xref_csscolorvalue() }} [ {{ Xref_csspercentage() }} | {{ Xref_csslength() }} ]</p> </dd>
</dl><h2>Values</h2>
<dl> <dt>&lt;side-or-corner&gt;</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>&lt;angle&gt;</dt> <dd>An angle of direction for the gradient. See {{ Xref_cssangle() }}.</dd> <dt>&lt;color-stop&gt;</dt> <dd>This value is comprised of a {{ Xref_csscolorvalue() }} value, followed by an optional stop position (either a percentage between 0% and 100% or a {{ Xref_csslength() }} 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>Example</h2> <pre>background: repeating-linear-gradient(to bottom right, red, red 5px, white 5px, white 10px);
</pre>
<h2 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</td> <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} {{ bug("479220") }} <sup><a href="#bc3">[3]</a></sup></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 {{ property_prefix("-ms") }}</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><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() }} <sup><a href="#bc1">[1]</a></sup></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></td> <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td> <td>10.0 {{ property_prefix("-ms") }} <a class="external" href="http://msdn.microsoft.com/en-us/library/hh673532.aspx" title="http://msdn.microsoft.com/en-us/library/hh673532.aspx"></a></td> <td>11.10{{ property_prefix("-o") }}</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> <p>{{ CompatGeckoDesktop("10") }}{{ property_prefix("-moz") }} {{ bug("685400") }} <sup><a href="#bc4">[4]</a></sup></p> </td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> </tbody>
</table>
<p><sup><a name="bc1">[1]</a></sup> Internet Explorer 5.5 through 8.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 {{ xref_cssangle("") }} 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. <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=61126" title="https://bugs.webkit.org/show_bug.cgi?id=61126"></a> <a class="external" href="http://dev.opera.com/articles/view/css3-linear-gradients/" title="http://dev.opera.com/articles/view/css3-linear-gradients/"></a></p>
<p><sup><a name="bc4">[4]</a></sup> Firefox 3.6 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, without removing the deprecated syntax and translation between the two is trivial:</p>
<pre>-moz-repeating-linear-gradient(to top left, blue, red);

is the same as:

-moz-repating-linear-gradient(bottom right, blue, red);
</pre>
<p>The legacy syntax, without <code>to</code>, is planned to go away when the prefix will be removed.</p><h2>See also</h2>
<ul> <li><a href="/en/Using_gradients" title="en/Using gradients">Using gradients</a></li> <li>{{ cssxref("-moz-linear-gradient") }}</li> <li>{{ cssxref("repeating-radial-gradient") }}</li> <li>{{ cssxref("background-image") }}</li> <li>{{ Cssxref("background") }}</li> <li>WebKit's original proposal: <a class="external" href="http://webkit.org/blog/175/introducing-css-gradients/" title="http://webkit.org/blog/175/introducing-css-gradients/">http://webkit.org/blog/175/introducing-css-gradients/</a></li> <li>Bug: {{ bug("479220") }}</li> <li>Bug: {{ bug("628480") }} <span id="summary_alias_container"><span id="short_desc_nonedit_display">Inconsistent rendering of -moz-repeating-linear-gradient across different OS's</span></span></li> <li>W3C Proposal for Linear Gradients: <a class="    external" href="http://dev.w3.org/csswg/css3-images/#linear-gradients" title="http://dev.w3.org/csswg/css3-images/#linear-gradients">http://dev.w3.org/csswg/css3-images/#linear-gradients</a></li> <li>W3C Proposal for Background Position: <a class=" external" href="http://www.w3.org/TR/css3-background/#the-background-position" title="http://www.w3.org/TR/css3-background/#the-background-position">http://www.w3.org/TR/css3-background/#the-background-position</a></li> <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx" title="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx">MSDN library, gradient filter</a> (reference doc)</li> <li><a class=" external" href="http://webkit.org/blog/1424/css3-gradients/">Safari: CSS3 Gradients</a> (blog post)</li>
</ul>
Revert to this revision