linear-gradient

  • Revision slug: CSS/linear-gradient
  • Revision title: linear-gradient
  • Revision id: 4786
  • Created:
  • Creator: Mvent2
  • Is current revision? No
  • Comment 156 words removed

Revision Content

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

Warning: This document reflects the property changes made in Firefox 3.6 Beta 2. See {{ Bug("513395") }} for more information.

Gradients are smooth transitions between two or more specified colors. Use of CSS gradients can replace images and reduce download time, create a more flexible layout, and look better while zooming. Mozilla (Firefox) supports two kinds of CSS gradients: linear and radial.

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.

The -moz-linear-gradient property does not allow repeating gradients. For this functionality, see {{ Cssxref("-moz-repeating-linear-gradient") }}.

Syntax

-moz-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.

Examples

Linear gradients run along an axis. The axis is defined in the following ways:

  • If the first parameter to the gradient function is only a <point>, the gradient axis starts from the specified point, and ends at the point you would get if you rotated the starting point by 180 degrees about the center of the box that the gradient is to be applied to.
  • If the first parameter is only an <angle>, the gradient axis starts from the box's corner that would ensure the axis goes through the box. The axis runs along the specified angle. The end point of the axis is defined such that the farthest corner of the box from the starting point is perpendicular to the gradient axis at that point.
  • If the first parameter has both a <point> and <angle>, the gradient axis starts from the point and runs along the angle. The end point is defined as before.
  • If neither a <point> or <angle> is specified, i.e. the entire function consists of only <stop> values, the gradient axis starts from the top of the box and runs vertically downwards, ending at the bottom of the box.

Positions can be specified along the gradient axis with a color for each of them, called "color-stops", and the areas between every color-stop smoothly transition between each other. Any one color in the gradient forms a straight line that is perpendicular to the gradient axis. In the below image, the gradient's axis starts from the top-left corner of the div, and is directed at a 45 degree angle. Two color-stops are specified, red and blue.

lingradexample.png

Example: Multiple color stops

If the first color-stop does not have a <length> or <percentage>, it defaults to 0%. If the last color-stop does not have a <length> or <percentage>, it defaults to 100%. If a color-stop doesn't have a specified position and it isn't the first or last stop, then it is assigned the position that is half way between the previous stop and next stop.

Color-stops must be specified in order. After assigning default values to the first and last stops if necessary, if a color-stop has a specified position that is less than the specified position of any color-stop before it in the list, its position is changed to be equal to the largest specified position of any color-stop before it.

A rainbow made from a gradient
background-image: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);

Examples: Repeating

The -moz-linear-gradient property does not allow repeating gradients. By default, the gradient will stretch to fill the element it is defined on. For this functionality, see {{ Cssxref("-moz-repeating-linear-gradient") }}.

Example: Using transparency

Linear with transparency
background: -moz-linear-gradient(top left, red, rgba(255,0,0,0));

Gradient backgrounds are not affected by {{ Cssxref("-moz-background-size") }} if all points and lengths are specified using fixed units (as opposed to percentages or keywords, which are relative to the value of -moz-background-size).

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-linear-gradient()
Opera --- ---
Safari (WebKit) 4.0 (528)

-webkit-gradient(linear,)
Safari Reference Library, gradients

See also

{{ languages( { "ja": "ja/CSS/-moz-linear-gradient" } ) }}

Revision Source

<p>{{ CSSMozExtensionRef() }}{{ gecko_minversion_header("1.9.2") }}</p>
<div class="warning"><strong>Warning:</strong> This document reflects the property changes made in Firefox 3.6 Beta 2. See {{ Bug("513395") }} for more information.</div>
<p>Gradients are smooth transitions between two or more specified colors. Use of CSS gradients can replace images and reduce download time, create a more flexible layout, and look better while zooming. Mozilla (Firefox) supports two kinds of CSS gradients: linear and radial.</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>
<p>The <code>-moz-linear-gradient</code> property does not allow repeating gradients. For this functionality, see {{ Cssxref("-moz-repeating-linear-gradient") }}.</p>
<h2>Syntax</h2>
<pre>-moz-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>
</dl>
<dl> <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>Examples</h2>
<p>Linear gradients run along an axis. The axis is defined in the following ways:</p>
<ul> <li>If the first parameter to the gradient function is only a &lt;point&gt;, the gradient axis starts from the specified point, and ends at the point you would get if you rotated the starting point by 180 degrees about the center of the box that the gradient is to be applied to.</li> <li>If the first parameter is only an &lt;angle&gt;, the gradient axis starts from the box's corner that would ensure the axis goes through the box. The axis runs along the specified angle. The end point of the axis is defined such that the farthest corner of the box from the starting point is perpendicular to the gradient axis at that point.</li> <li>If the first parameter has both a &lt;point&gt; and &lt;angle&gt;, the gradient axis starts from the point and runs along the angle. The end point is defined as before.</li> <li>If neither a &lt;point&gt; or &lt;angle&gt; is specified, i.e. the entire function consists of only &lt;stop&gt; values, the gradient axis starts from the top of the box and runs vertically downwards, ending at the bottom of the box.</li>
</ul>
<p>Positions can be specified along the gradient axis with a color for each of them, called "color-stops", and the areas between every color-stop smoothly transition between each other. Any one color in the gradient forms a straight line that is perpendicular to the gradient axis. In the below image, the gradient's axis starts from the top-left corner of the div, and is directed at a 45 degree angle. Two color-stops are specified, red and blue.</p>
<p><img alt="lingradexample.png" class="internal default" src="/@api/deki/files/3849/=lingradexample.png"></p>
<h3>Example: Multiple color stops</h3>
<p>If the first color-stop does not have a <code>&lt;length&gt;</code> or <code>&lt;percentage&gt;</code>, it defaults to 0%. If the last color-stop does not have a <code>&lt;length&gt;</code> or <code>&lt;percentage&gt;</code>, it defaults to 100%. If a color-stop doesn't have a specified position and it isn't the first or last stop, then it is assigned the position that is half way between the previous stop and next stop.</p>
<p>Color-stops must be specified in order. After assigning default values to the first and last stops if necessary, if a color-stop has a specified position that is less than the specified position of any color-stop before it in the list, its position is changed to be equal to the largest specified position of any color-stop before it.</p>
<div style="background-image: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); border: 1px solid black;">A rainbow made from a gradient</div>
<pre>background-image: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);</pre>
<h3>Examples: Repeating</h3>
<p>The <code>-moz-linear-gradient</code> property does not allow repeating gradients. By default, the gradient will stretch to fill the element it is defined on. For this functionality, see {{ Cssxref("-moz-repeating-linear-gradient") }}.</p>
<h3>Example: Using transparency</h3>
<div style="background: -moz-linear-gradient(top left, red, rgba(255, 0, 0, 0)) repeat scroll 0% 0% transparent; text-shadow: 1px 1px 0pt black; color: white; border: 1px solid black;">Linear with transparency</div>
<pre>background: -moz-linear-gradient(top left, red, rgba(255,0,0,0));</pre>
<p>Gradient backgrounds are not affected by {{ Cssxref("-moz-background-size") }} if all points and lengths are specified using fixed units (as opposed to percentages or keywords, which are relative to the value of <code>-moz-background-size</code>).</p>
<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-linear-gradient()</code></td> </tr> <tr> <td>Opera</td> <td>---</td> <td>---</td> </tr> <tr> <td>Safari (WebKit)</td> <td>4.0 (528)</td> <td> <p><code>-webkit-gradient(linear,</code><code>…</code><code>)</code><br> <a class="external" href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html" title="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html">Safari Reference Library, gradients</a></p> </td> </tr> </tbody>
</table><h2>See also</h2>
<ul> <li>{{ cssxref("-moz-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>
</ul>
<p>{{ languages( { "ja": "ja/CSS/-moz-linear-gradient" } ) }}</p>
Revert to this revision