Table of contents
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
background-image
property, as well as within the shorthand
background
. You specify a gradient value instead of an image URL.
The linear-gradient value does not allow repeating gradients. For this functionality, see
-moz-repeating-linear-gradient
.
Syntax
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
Vendor prefixes: See the compatibility table below for detail on the vendor prefixes you'll need to use for gradients.
Where:
- <stop>
-
<color>[<percentage>|<length>]
Values
- <point>
- A position, interpreted in the same way as
background-positionor-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. See
<angle>. - <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>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.
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.
background-image: linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
Examples: Repeating
The linear-gradient does not allow repeating gradients. By default, the gradient will stretch to fill the element it is defined on. For this functionality, see
-moz-repeating-linear-gradient
.
Example: Using transparency
background-image: linear-gradient(top left, red, rgba(255,0,0,0));
Gradient backgrounds are not affected by
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 background-size).
Notes
If you set the
background-image
property of the
<body> tag to a linear-gradient, the gradient won't fill the browser screen unless you also set the
min-height
property of the document root (e.g. the
<html> tag) to 100%.
Browser compatibility
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 3.6 (1.9.2) -moz bug 479220 | 10.0 (534.16) -webkit | 10.0 -ms | 11.10 -o | Nightly build -webkit |
| Legacy syntaxNon-standard | -- | 3 -webkit | -- | -- | 4.0 -webkit |
- Internet Explorer 5.5 through 8.0 supports proprietary
filter: progid:DXImageTransform.Microsoft.Gradient()filter. - WebKit since 528 supports the legacy
-webkit-gradient(linear,…)function. As of WebKit 534.16, it also supports the standard gradient syntax. - Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in
-webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.
Cross-browser gradients
Considering all prefixes above, here is a gradient from pink to green, top to bottom. (Code taken from css3please.com)
.grad {
background-color: #F07575; /* fallback color if gradients are not supported */
background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 80%, 70%)), to(#BADA55));
background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #BADA55);
background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #BADA55);
background-image: -ms-linear-gradient(top, hsl(0, 80%, 70%), #BADA55);
background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #BADA55);
background-image: linear-gradient(top, hsl(0, 80%, 70%), #BADA55); /* standard, but currently unimplemented */
}
Attachments (1)
| File | Size | Date | Attached by | |||
|---|---|---|---|---|---|---|
 | lingradexample.png Linear Gradient Example | 71.68 kB | 23:56, 11 Nov 2009 | crayzeepete | Actions | |
| Images 1 | ||
|---|---|---|
 Linear Gradient Examplelingradexample.png | ||
