repeating-linear-gradient

  • Revision slug: CSS/repeating-linear-gradient
  • Revision title: repeating-linear-gradient
  • Revision id: 14026
  • Created:
  • Creator: FreakCERS
  • Is current revision? No
  • Comment /* See also */ added link to relevant bug; 26 words added

Revision Content

{{ CSSMozExtensionRef() }}{{ gecko_minversion_header("1.9.2") }}

This works similarly to the standard linear gradients as described by {{ cssxref("-moz-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

-moz-repeating-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

Where:

<stop>

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

Values

<point>
A position, interpreted in the same way as {{ Cssxref("background-position") }} or {{ Cssxref("-moz-transform-origin") }}. This is used to define the starting point of the gradient.
<angle>
An angle of direction for the gradient. See {{ Xref_cssangle() }}.
<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: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);

Browser compatibility

Browser Lowest version Support of
Internet Explorer 5.5 (including 8.0) filter: progid:DXImageTransform.Microsoft.Gradient()
MSDN library, gradient filter
Firefox (Gecko) 3.6 (1.9.2) -moz-repeating-linear-gradient()
Opera --- ---
Safari (WebKit) 5.0.3 (r75891)

-webkit-repeating-linear-gradient()
Safari: CSS3 Gradients

See also

Revision Source

<p>{{ CSSMozExtensionRef() }}{{ gecko_minversion_header("1.9.2") }}</p>
<p>This works similarly to the standard linear gradients as described by {{ cssxref("-moz-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>-moz-repeating-linear-gradient( [&lt;point&gt; || &lt;angle&gt;,]? &lt;stop&gt;, &lt;stop&gt; [, &lt;stop&gt;]* )
</pre>
<p>Where:</p>
<dl> <dt>&lt;stop&gt;</dt> <dd> <p>{{ Xref_csscolorvalue() }} [ {{ Xref_csspercentage() }} |  {{ Xref_csslength() }} ]</p> </dd>
</dl>
<h2>Values</h2>
<dl> <dt>&lt;point&gt;</dt> <dd>A position, interpreted in the same way as {{ Cssxref("background-position") }} or {{ Cssxref("-moz-transform-origin") }}. This is used to define the starting point of the gradient.</dd> <dt>&lt;angle&gt;</dt> <dd>An angle of direction for the gradient. See {{ Xref_cssangle() }}.</dd> <dt>&lt;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).</dd> <dd>Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.</dd>
</dl>
<h2>Example</h2>
<div style="background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px); width: 140px; height: 140px; border: 1px solid black;"> </div>
<pre>background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);</pre>
<h2>Browser compatibility</h2>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest version</th> <th>Support of</th> </tr> <tr> <td>Internet Explorer</td> <td>5.5 (including 8.0)</td> <td><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code><br> <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></td> </tr> <tr> <td>Firefox (Gecko)</td> <td>3.6 (1.9.2)</td> <td><code>-moz-repeating-linear-gradient()</code></td> </tr> <tr> <td>Opera</td> <td>---</td> <td>---</td> </tr> <tr> <td>Safari (WebKit)</td> <td>5.0.3 (r75891)</td> <td> <p><code>-webkit-repeating-linear-gradient()</code><br> <a class=" external" href="http://webkit.org/blog/1424/css3-gradients/">Safari: CSS3 Gradients</a></p> </td> </tr> </tbody>
</table>
<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("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>
</ul>
Revert to this revision