linear-gradient

  • Revision slug: CSS/linear-gradient
  • Revision title: linear-gradient
  • Revision id: 4777
  • Created:
  • Creator: crayzeepete
  • Is current revision? No
  • Comment Minor color value fix; 2 words added, 4 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 the straight line between the two points specified in the gradient rule. 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. 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%.

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 16%,
                                       yellow 32%,
                                       green 48%,
                                       blue 64%,
                                       indigo 80%,
                                       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

Note that our syntax proposal for CSS gradients differs significantly from WebKit's proposal:

  • Gecko (Firefox) uses separate kinds of property values to distinguish radial and linear gradients, whereas WebKit lumps them into a single kind of property value and needs a leading parameter to identify the type of gradient.
  • Gecko requires CSS lengths for the gradient axis points, but WebKit uses unitless numbers representing pixels. Both WebKit and Gecko support percentages and position keywords.
  • Gecko honors {{ Cssxref("background-repeat") }} by repeating the gradient in the natural way. WebKit does not repeat gradients in this way, but instead tiles them as if they were images. Since the default value of {{ Cssxref("background-repeat") }} is repeat, in Gecko you will often need to specify no-repeat explicitly (especially for radial 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 -moz-linear-gradient 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><span class="lang lang-en">{{ xref csscolorvalue }}</span> [ {{ 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 the straight line between the two points specified in the gradient rule. 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. 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%.</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 16%,yellow 32%, green 48%, blue 64%,indigo 80%,violet); border: 1px solid black;">A rainbow made from a gradient</div>
<pre>background-image: -moz-linear-gradient(left,
                                       red,
                                       orange 16%,
                                       yellow 32%,
                                       green 48%,
                                       blue 64%,
                                       indigo 80%,
                                       violet);</pre>
<h3>Examples: Repeating</h3>
<p>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") }}.</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 -moz-background-size).</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><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></td> </tr> </tbody>
</table>
<p>Note that our syntax proposal for CSS gradients differs significantly from WebKit's proposal:</p>
<ul> <li>Gecko (Firefox) uses separate kinds of property values to distinguish radial and linear gradients, whereas WebKit lumps them into a single kind of property value and needs a leading parameter to identify the type of gradient.</li> <li>Gecko requires CSS lengths for the gradient axis points, but WebKit uses unitless numbers representing pixels. Both WebKit and Gecko support percentages and position keywords.</li> <li>Gecko honors {{ Cssxref("background-repeat") }} by repeating the gradient in the natural way. WebKit does not repeat gradients in this way, but instead tiles them as if they were images. Since the default value of {{ Cssxref("background-repeat") }} is<code> repeat</code>, in Gecko you will often need to specify<code> no-repeat </code>explicitly (especially for radial gradients).</li>
</ul>
<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