The CSS -moz-linear-gradient Mozilla extension property value was introduced in Gecko 1.9.2 (Firefox 3.6). 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. Firefox supports two kinds of CSS gradients: linear and radial.
Mozilla currently only supports CSS gradients as values of the background-image property, as well as within the shorthand 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 -moz-repeating-linear-gradient.
Values
Values are separated with a comma which is not followed by a space.
| Value | Description |
|---|---|
<point> |
A position, interpreted in the same way as background-position or -moz-transform-origin. This is used to define the starting point of the gradient. It can be specified as a percentage, in pixels, or using left, center, or right for horizontal and top, center, or bottom for vertical positioning. Positions start from the top left corner of the affected element. If only one of the horizontal or vertical positioning is specified, the other direction defaults to center.
|
<angle> |
An angle of direction for the gradient. Angles are positive or negative integers followed by deg (45deg).
|
<stop> |
This value is comprised of a color value, followed by an optional stop position (either a percentage between 0% and 100% or a length value along the gradient axis). Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.
|
CSS examples:
body {
background-image:-moz-linear-gradient(-45deg,red,blue);
}
that will produce:
background-image: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
will produce:
background: -moz-linear-gradient(top left, red, rgba(255,0,0,0));
will produce:
