mozilla

Revision 34728 of Using CSS gradients

  • Revision slug: CSS/Using_CSS_gradients
  • Revision title: Using CSS gradients
  • Revision id: 34728
  • Created:
  • Creator: marcobiscaro2112
  • Is current revision? No
  • Comment no changes

Revision Content

{{ gecko_minversion_header("1.9.2") }}

CSS3 added support for new types of {{ xref_cssimage() }}, gradients, in the CSS {{ cssxref("background") }} property. Using CSS gradients in a background lets you display smooth transitions between two or more specified colors; this lets you avoid using images for these effects, thereby reducing download time and bandwidth usage. In addition, because the gradient is generated by the browser, objects with gradients look better when zoomed, and you can adjust your layout much more flexibly.

Browsers support two types of gradients: linear ({{ cssxref("linear-gradient") }}) and radial ({{ cssxref("radial-gradient") }}).

Linear gradients

To create a linear gradient, you set a starting point and a direction (specified as an angle) along which the gradient effect is applied. You also define color stops. Color stops are the colors you want Gecko to render smooth transitions among, and you must specify at least two of them, but can specify more to create more complex gradient effects.

Simple linear gradients

Here's a linear gradient that starts at the center (horizontally) and top (vertically), and starts blue, transitioning to white.

Screen Shot Live Demonstration
t

 

/* The old syntax, deprecated, but still needed with the -o, -ms and -webkit prefixes*/
background: linear-gradient(top, blue, white); 

/* The new syntax needed for Firefox 10 onwards, with the -moz prefix */
background: linear-gradient(to bottom, blue, white);

Changing the same gradient to run from left to right:

Screen Shot Live Demonstration
basic_linear_blueleft.png
t

 

/* The old syntax, deprecated, but still needed with the -o, -ms and -webkit prefixes*/
background: linear-gradient(left, blue, white); 

/* The new syntax needed for Firefox 10 onwards, with the -moz prefix */
background: linear-gradient(to right, blue, white);

You can make the gradient run diagonally by specifying both the horizontal and vertical starting positions. For example:

Screen Shot Live Demonstration
basic_linear_bluetopleft.png
t
/* The old syntax, deprecated, but still needed with the -o, -ms and -webkit prefixes*/
background: linear-gradient(left top, blue, white); 

/* The new syntax needed for Firefox 10 onwards, with the -moz prefix */
background: linear-gradient(to bottom right, blue, white);

Using angles

If you don't specify an angle, one is determined automatically based on the start position. If you'd like more control over the direction of the gradient, you can set the angle specifically.

For example, here are two gradients that have the same starting point of "left center", but the second one also has an angle of 20 degrees.

linear_gradient_angle.png

The one on the right uses CSS like this:

/* Must be prefixed */
background: linear-gradient(left 20deg, black, white);

The angle is specified as an angle between a horizontal line and the gradient line, going counter-clockwise. In other words, 0deg generates a left to right horizontal gradient, while 90deg creates a vertical gradient from the bottom to the top:

linear_redangles.png

/* Must be prefixed */
background: linear-gradient(<angle>, red, white);

Color stops

Color stops are points along the gradient line that will have a specific color at that location. The location can be specified as either a percentage of the length of the line, or as an absolute length. You may specify as many color stops as you like in order to achieve the desired effect.

If you specify the location as a percentage, 0% represents the starting point, while 100% represents the ending point; however, you can use values outside that range if necessary to get the effect you want.

Example: Three color stops

This example specifies three color stops:

Screen Shot Live Demonstration
linear_colorstops1.png
t
/* The old syntax, deprecated, but still needed with the -o, -ms and -webkit prefixes*/
background: linear-gradient(top, blue, white 80%, orange);

/* The new syntax needed for Firefox 10 onwards, with the -moz prefix */
background: linear-gradient(to bottom, blue, white 80%, orange);

Note that the first and last color stops don't specify a location; because of that, values of 0% and 100% are assigned automatically. The middle color stop specifies a location of 80%, putting it most of the way toward the bottom.

Example: Evenly spaced color stops

Here's an example using a wide variety of colors, all evenly spaced:

Screen Shot Live Demonstration
linear_rainbow.png
t
/* The old syntax, deprecated, but still needed with the -o, -ms and -webkit prefixes*/
background: linear-gradient(left, red, orange, yellow, green, blue);

/* The new syntax needed for Firefox 10 onwards, with the -moz prefix */
background: linear-gradient(to right, red, orange, yellow, green, blue);

Notice that the color stops are automatically spaced evenly when no locations are specified.

Transparency and gradients

Gradients support transparency. You can use this, for example, when stacking multiple backgrounds, to create fading effects on background images. For example:

linear_multibg_transparent.png

/* The old syntax, deprecated, but still needed with the -o, -ms and -webkit prefixes*/ 
background: linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);

/* The new syntax needed for Firefox 10 onwards, with the -moz prefix */  
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);

The backgrounds are stacked with the first specified background on top, and each successive background farther away. By stacking backgrounds this way, you can create very creative effects as seen above.

Radial gradients

Radial gradients are specified using the {{ cssxref("-moz-radial-gradient") }} property. The syntax is similar to that for linear gradients, except you can specify the gradient's shape (whether it should be a circle or ellipse) as well as its size.

Color stops

You specify color stops the same way as for linear gradients. The gradient line extends out from the starting position in all directions.

Example: Evenly spaced color stops

By default, as with linear gradients, the color stops are evenly spaced:

Screen Shot Live Demonstration
radial_gradient_even.png  
background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255));

Example: Explicitly spaced color stops

Here we specify specific locations for the color stops:

Screen Shot Live Demonstration
radial_gradient_varied.png  
background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);

Size

This is one of the areas in which radial gradients differ from linear gradients. You can provide a size value that specifies the point that defines the size of the circle or ellipse. See this description of the size constants for specifics.

Example: closest-side for ellipses

This ellipse uses the closest-side size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.

Screen Shot Live Demonstration
radial_ellipse_size1.png  
background: -moz-radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);

Example: farthest-corner for ellipses

This example is similar to the previous one, except that its size is specified as farthest-corner, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.

Screen Shot Live Demonstration
radial_ellipse_size2.png  
background: -moz-radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);

Example: closest-side for circles

This example uses closest-side, which determines the circle's size as the distance between the start point (the center) and the closest side.

Screen Shot Live Demonstration
radial_circle_size1.png  
background: -moz-radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);

Here, the circle's radius is half the height of the box, since the top and bottom edges are equidistant from the start point and are closer than the left and right edges.

Repeating gradients

The {{ cssxref("linear-gradient") }} and {{ cssxref("radial-gradient") }} properties don't support automatically repeating the color stops. However, the {{ cssxref("repeating-linear-gradient") }} and {{ cssxref("repeating-radial-gradient") }} properties are available to offer this functionality.

Example: Repeating linear gradient

This example uses {{ cssxref("repeating-linear-gradient") }} to create a gradient:

Screen Shot Live Demonstration
repeating_linear_gradient.png  
background: repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);

Example: Repeating radial gradient

This example uses {{ cssxref("-moz-repeating-radial-gradient") }} to create a gradient:

Screen Shot Live Demonstration
repeating_radial_gradient.png
background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);

See also

  • Gradient-related reference articles: {{ xref_cssimage() }}, {{ xref_cssgradient() }}, {{ cssxref("linear-gradient") }}, {{ cssxref("radial-gradient") }}, {{ cssxref("repeating-linear-gradient") }}, {{ cssxref("repeating-radial-gradient") }}.

{{ HTML5ArticleTOC() }}

{{ languages( { "fr": "fr/Utilisation_de_dégradés", "ja": "ja/Using_gradients", "de": "de/Farbverläufe_in_CSS", "en": "en/Using_gradients" } ) }}

Revision Source

<p>{{ gecko_minversion_header("1.9.2") }}</p>
<p><a href="/en/CSS/CSS3" title="CSS3">CSS3</a> added support for new types of {{ xref_cssimage() }}, <em>gradients</em>, in the CSS {{ cssxref("background") }} property. Using CSS gradients in a background lets you display smooth transitions between two or more specified colors; this lets you avoid using images for these effects, thereby reducing download time and bandwidth usage. In addition, because the gradient is generated by the browser, objects with gradients look better when zoomed, and you can adjust your layout much more flexibly.</p>
<p>Browsers support two types of gradients: linear ({{ cssxref("linear-gradient") }}) and radial ({{ cssxref("radial-gradient") }}).</p>
<h2>Linear gradients</h2>
<p>To create a linear gradient, you set a starting point and a direction (specified as an angle) along which the gradient effect is applied. You also define <strong>color stops</strong>. Color stops are the colors you want Gecko to render smooth transitions among, and you must specify at least two of them, but can specify more to create more complex gradient effects.</p>
<h3>Simple linear gradients</h3>
<p>Here's a linear gradient that starts at the center (horizontally) and top (vertically), and starts blue, transitioning to white.</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;"> <tbody> <tr> <td class="header">Screen Shot</td> <td class="header">Live Demonstration</td> </tr> <tr> <td><img alt="" border="0" src="/@api/deki/files/3950/=basic_linear_bluetop.png" style="text-align: center;"></td> <td> <div style="width: 100px; height: 100px; border: 1px solid rgb(51, 51, 51); background: -moz-linear-gradient(top, blue, white);background: -moz-linear-gradient(to bottom, blue, white);background: -ms-linear-gradient(top, blue, white);background: -o-linear-gradient(top, blue, white);background: -webkit-linear-gradient(top, blue, white);"> <div style="display:none;">t</div> </div> </td> </tr> </tbody>
</table>
<p> </p>
<pre class="brush: css">/* The old syntax, deprecated, but still needed with the -o, -ms and -webkit prefixes*/
background: linear-gradient(top, blue, white); 

/* The new syntax needed for Firefox 10 onwards, with the -moz prefix */
background: linear-gradient(to bottom, blue, white);
</pre>
<p>Changing the same gradient to run from left to right:</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;"> <tbody> <tr> <td class="header">Screen Shot</td> <td class="header">Live Demonstration</td> </tr> <tr> <td><img alt="basic_linear_blueleft.png" class="internal default" src="/@api/deki/files/3951/=basic_linear_blueleft.png"></td> <td> <div style="width: 100px; height: 100px; border: 1px solid rgb(51, 51, 51); background: -moz-linear-gradient(left, blue, white);background: -moz-linear-gradient(to right, blue, white);background: -ms-linear-gradient(left, blue, white);background: -o-linear-gradient(left, blue, white);background: -webkit-linear-gradient(left, blue, white);"> <div style="display:none;">t</div> </div> </td> </tr> </tbody>
</table>
<p> </p>
<pre class="brush: css">/* The old syntax, deprecated, but still needed with the -o, -ms and -webkit prefixes*/
background: linear-gradient(left, blue, white); 

/* The new syntax needed for Firefox 10 onwards, with the -moz prefix */
background: linear-gradient(to right, blue, white);
</pre>
<p>You can make the gradient run diagonally by specifying both the horizontal and vertical starting positions. For example:</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;"> <tbody> <tr> <td class="header">Screen Shot</td> <td class="header">Live Demonstration</td> </tr> <tr> <td><img alt="basic_linear_bluetopleft.png" class="internal default" src="/@api/deki/files/3952/=basic_linear_bluetopleft.png"></td> <td> <div style="width: 100px; height: 100px; border: 1px solid rgb(51, 51, 51); background: -moz-linear-gradient(left top, blue, white);background: -moz-linear-gradient(to bottom right, blue, white);background: -ms-linear-gradient(left top, blue, white);background: -o-linear-gradient(left top, blue, white);background: -webkit-linear-gradient(left top, blue, white);"> <div style="display:none;">t</div> </div> </td> </tr> </tbody>
</table>
<pre class="brush: css">/* The old syntax, deprecated, but still needed with the -o, -ms and -webkit prefixes*/
background: linear-gradient(left top, blue, white); 

/* The new syntax needed for Firefox 10 onwards, with the -moz prefix */
background: linear-gradient(to bottom right, blue, white);
</pre>
<h3>Using angles</h3>
<p>If you don't specify an angle, one is determined automatically based on the start position. If you'd like more control over the direction of the gradient, you can set the angle specifically.</p>
<p>For example, here are two gradients that have the same starting point of "left center", but the second one also has an angle of 20 degrees.</p>
<p><img alt="linear_gradient_angle.png" class="internal default" src="/@api/deki/files/3953/=linear_gradient_angle.png"></p>
<p>The one on the right uses CSS like this:</p>
<pre class="brush: css">/* Must be prefixed */
background: linear-gradient(left 20deg, black, white);
</pre>
<p>The angle is specified as an angle between a horizontal line and the gradient line, going counter-clockwise. In other words, 0deg generates a left to right horizontal gradient, while 90deg creates a vertical gradient from the bottom to the top:</p>
<p><img alt="linear_redangles.png" class="internal default" src="/@api/deki/files/3954/=linear_redangles.png"></p>
<pre class="brush: css">/* Must be prefixed */
background: linear-gradient(&lt;angle&gt;, red, white);
</pre>
<h3>Color stops</h3>
<p>Color stops are points along the gradient line that will have a specific color at that location. The location can be specified as either a percentage of the length of the line, or as an absolute length. You may specify as many color stops as you like in order to achieve the desired effect.</p>
<p>If you specify the location as a percentage, 0% represents the starting point, while 100% represents the ending point; however, you can use values outside that range if necessary to get the effect you want.</p>
<h4>Example: Three color stops</h4>
<p>This example specifies three color stops:</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;"> <tbody> <tr> <td class="header">Screen Shot</td> <td class="header">Live Demonstration</td> </tr> <tr> <td><img alt="linear_colorstops1.png" class="internal default" src="/@api/deki/files/3955/=linear_colorstops1.png"></td> <td> <div style="width: 100px; height: 100px; border: 1px solid rgb(51, 51, 51); background: -moz-linear-gradient(center top , blue, white 80%, orange) repeat scroll 0% 0% transparent;background: -moz-linear-gradient(to bottom, blue, white 80%, orange) repeat scroll 0% 0% transparent;background: -ms-linear-gradient(center top , blue, white 80%, orange) repeat scroll 0% 0% transparent;background: -o-linear-gradient(center top , blue, white 80%, orange) repeat scroll 0% 0% transparent;background: -webkit-linear-gradient(center top , blue, white 80%, orange) repeat scroll 0% 0% transparent;"> <div style="display:none;">t</div> </div> </td> </tr> </tbody>
</table>
<pre class="brush: css">/* The old syntax, deprecated, but still needed with the -o, -ms and -webkit prefixes*/
background: linear-gradient(top, blue, white 80%, orange);

/* The new syntax needed for Firefox 10 onwards, with the -moz prefix */
background: linear-gradient(to bottom, blue, white 80%, orange);
</pre>
<p>Note that the first and last color stops don't specify a location; because of that, values of 0% and 100% are assigned automatically. The middle color stop specifies a location of 80%, putting it most of the way toward the bottom.</p>
<h4>Example: Evenly spaced color stops</h4>
<p>Here's an example using a wide variety of colors, all evenly spaced:</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;"> <tbody> <tr> <td class="header">Screen Shot</td> <td class="header">Live Demonstration</td> </tr> <tr> <td><img alt="linear_rainbow.png" class="internal default" src="/@api/deki/files/3956/=linear_rainbow.png"></td> <td> <div style="width: 100px; height: 100px; border: 1px solid rgb(51, 51, 51); background: -moz-linear-gradient(left, red, orange, yellow, green, blue) repeat scroll 0% 0% transparent;background: -moz-linear-gradient(to right, red, orange, yellow, green, blue) repeat scroll 0% 0% transparent;background: -ms-linear-gradient(left, red, orange, yellow, green, blue) repeat scroll 0% 0% transparent;background: -o-linear-gradient(left, red, orange, yellow, green, blue) repeat scroll 0% 0% transparent;background: -webkit-linear-gradient(left, red, orange, yellow, green, blue) repeat scroll 0% 0% transparent;"> <div style="display:none;">t</div> </div> </td> </tr> </tbody>
</table>
<pre class="brush: css">/* The old syntax, deprecated, but still needed with the -o, -ms and -webkit prefixes*/
background: linear-gradient(left, red, orange, yellow, green, blue);

/* The new syntax needed for Firefox 10 onwards, with the -moz prefix */
background: linear-gradient(to right, red, orange, yellow, green, blue);
</pre>
<p>Notice that the color stops are automatically spaced evenly when no locations are specified.</p>
<h3>Transparency and gradients</h3>
<p>Gradients support transparency. You can use this, for example, when stacking multiple backgrounds, to create fading effects on background images. For example:</p>
<p><img alt="linear_multibg_transparent.png" class="internal default" src="/@api/deki/files/3957/=linear_multibg_transparent.png"></p>
<pre class="brush: css">/* The old syntax, deprecated, but still needed with the -o, -ms and -webkit prefixes*/ 
background: linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);

/* The new syntax needed for Firefox 10 onwards, with the -moz prefix */  
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
</pre>
<p>The backgrounds are stacked with the first specified background on top, and each successive background farther away. By stacking backgrounds this way, you can create very creative effects as seen above.</p>
<h2>Radial gradients</h2>
<p>Radial gradients are specified using the {{ cssxref("-moz-radial-gradient") }} property. The syntax is similar to that for linear gradients, except you can specify the gradient's shape (whether it should be a circle or ellipse) as well as its size.</p>
<h3>Color stops</h3>
<p>You specify color stops the same way as for linear gradients. The gradient line extends out from the starting position in all directions.</p>
<h4>Example: Evenly spaced color stops</h4>
<p>By default, as with linear gradients, the color stops are evenly spaced:</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;"> <tbody> <tr> <td class="header">Screen Shot</td> <td class="header">Live Demonstration</td> </tr> <tr> <td><img alt="radial_gradient_even.png" class="internal default" src="/@api/deki/files/3958/=radial_gradient_even.png"></td> <td> </td> </tr> </tbody>
</table>
<pre class="brush: css">background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255));
</pre>
<h4>Example: Explicitly spaced color stops</h4>
<p>Here we specify specific locations for the color stops:</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;"> <tbody> <tr> <td class="header">Screen Shot</td> <td class="header">Live Demonstration</td> </tr> <tr> <td><img alt="radial_gradient_varied.png" class="internal default" src="/@api/deki/files/3959/=radial_gradient_varied.png"></td> <td> </td> </tr> </tbody>
</table>
<pre class="brush: css"><span style="color: rgb(0, 0, 0); font-weight: bold;">background</span><span style="color: rgb(0, 170, 0);">:</span> -moz-radial-gradient<span style="color: rgb(0, 170, 0);">(</span><span style="color: rgb(153, 51, 51);">red</span> <span style="color: rgb(153, 51, 51);"><span style="color: rgb(204, 102, 204);">5</span>%</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(153, 51, 51);">yellow</span> <span style="color: rgb(153, 51, 51);"><span style="color: rgb(204, 102, 204);">25</span>%</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(204, 0, 204);">#1E90FF</span> <span style="color: rgb(153, 51, 51);"><span style="color: rgb(204, 102, 204);">50</span>%</span><span style="color: rgb(0, 170, 0);">);</span>
</pre>
<h3>Size</h3>
<p>This is one of the areas in which radial gradients differ from linear gradients. You can provide a size value that specifies the point that defines the size of the circle or ellipse. See <a href="/en/CSS/radial-gradient#Size_constants" title="en/CSS/-moz-radial-gradient#Size constants">this description of the size constants</a> for specifics.</p>
<h4>Example: closest-side for ellipses</h4>
<p>This ellipse uses the <code>closest-side</code> size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.</p>
<table class="standard-table" style="table-layout: fixed; width: 520px;"> <tbody> <tr> <td class="header">Screen Shot</td> <td class="header">Live Demonstration</td> </tr> <tr> <td><img alt="radial_ellipse_size1.png" class="internal default" src="/@api/deki/files/3960/=radial_ellipse_size1.png"></td> <td> </td> </tr> </tbody>
</table>
<pre class="brush: css">background: -moz-radial-gradient<span style="color: rgb(0, 170, 0);">(</span>ellipse closest-side<span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(153, 51, 51);">red</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(153, 51, 51);">yellow</span> <span style="color: rgb(153, 51, 51);"><span style="color: rgb(204, 102, 204);">10</span>%</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(204, 0, 204);">#1E90FF</span> <span style="color: rgb(153, 51, 51);"><span style="color: rgb(204, 102, 204);">50</span>%</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(153, 51, 51);">white</span><span style="color: rgb(0, 170, 0);">);</span>
</pre>
<h4>Example: farthest-corner for ellipses</h4>
<p>This example is similar to the previous one, except that its size is specified as <code>farthest-corner</code>, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.</p>
<table class="standard-table" style="table-layout: fixed; width: 520px;"> <tbody> <tr> <td class="header">Screen Shot</td> <td class="header">Live Demonstration</td> </tr> <tr> <td><img alt="radial_ellipse_size2.png" class="internal default" src="/@api/deki/files/3961/=radial_ellipse_size2.png"></td> <td> </td> </tr> </tbody>
</table>
<pre class="brush: css">background: -moz-radial-gradient<span style="color: rgb(0, 170, 0);">(</span>ellipse farthest-corner<span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(153, 51, 51);">red</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(153, 51, 51);">yellow</span> <span style="color: rgb(153, 51, 51);"><span style="color: rgb(204, 102, 204);">10</span>%</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(204, 0, 204);">#1E90FF</span> <span style="color: rgb(153, 51, 51);"><span style="color: rgb(204, 102, 204);">50</span>%</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(153, 51, 51);">white</span><span style="color: rgb(0, 170, 0);">);</span>
</pre>
<h4>Example: closest-side for circles</h4>
<p>This example uses <code>closest-side</code>, which determines the circle's size as the distance between the start point (the center) and the closest side.</p>
<table class="standard-table" style="table-layout: fixed; width: 520px;"> <tbody> <tr> <td class="header">Screen Shot</td> <td class="header">Live Demonstration</td> </tr> <tr> <td><img alt="radial_circle_size1.png" class="internal default" src="/@api/deki/files/3962/=radial_circle_size1.png"></td> <td> </td> </tr> </tbody>
</table>
<pre class="brush: css">background: -moz-radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
</pre>
<p>Here, the circle's radius is half the height of the box, since the top and bottom edges are equidistant from the start point and are closer than the left and right edges.</p>
<h2>Repeating gradients</h2>
<p>The {{ cssxref("linear-gradient") }} and {{ cssxref("radial-gradient") }} properties don't support automatically repeating the color stops. However, the {{ cssxref("repeating-linear-gradient") }} and {{ cssxref("repeating-radial-gradient") }} properties are available to offer this functionality.</p>
<h3>Example: Repeating linear gradient</h3>
<p>This example uses {{ cssxref("repeating-linear-gradient") }} to create a gradient:</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;"> <tbody> <tr> <td class="header">Screen Shot</td> <td class="header">Live Demonstration</td> </tr> <tr> <td><img alt="repeating_linear_gradient.png" class="internal default" src="/@api/deki/files/3964/=repeating_linear_gradient.png"></td> <td> </td> </tr> </tbody>
</table>
<pre class="brush: css">background: repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
</pre>
<h3>Example: Repeating radial gradient</h3>
<p>This example uses {{ cssxref("-moz-repeating-radial-gradient") }} to create a gradient:</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;"> <tbody> <tr> <td class="header">Screen Shot</td> <td class="header">Live Demonstration</td> </tr> <tr> <td><img alt="repeating_radial_gradient.png" class="internal default" src="/@api/deki/files/3965/=repeating_radial_gradient.png"></td> <td> </td></tr> </tbody>
</table>
<pre class="brush: css">background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
</pre>
<h2>See also</h2>
<ul> <li>Gradient-related reference articles: {{ xref_cssimage() }}, {{ xref_cssgradient() }}, {{ cssxref("linear-gradient") }}, {{ cssxref("radial-gradient") }}, {{ cssxref("repeating-linear-gradient") }}, {{ cssxref("repeating-radial-gradient") }}.</li>
</ul>
<p>{{ HTML5ArticleTOC() }}</p>
<p>{{ languages( { "fr": "fr/Utilisation_de_dégradés", "ja": "ja/Using_gradients", "de": "de/Farbverläufe_in_CSS", "en": "en/Using_gradients" } ) }}</p>
Revert to this revision