linear-gradient

The CSS linear-gradient() function creates an <image> which represents a linear gradient of colors. The result of this function is an object of the CSS <gradient> data type. Like any other gradient, a CSS linear gradient is not a CSS <color> but an image with no intrinsic dimensions; that is, it has no natural or preferred size, nor ratio. Its concrete size will match the one of the element it applies to.

Linear gradients are defined by an axis, the gradient line, with each point on it being of a different colors. Perpendicular lines to the gradient-line have one single color, the one of the point on the gradient line.

 

linear-gradient.png

The gradient line is defined by the center of the box containing the gradient image and by an angle. The color of the gradient is defined by different points, the starting point, the ending point and, in between, optional stop-color points.

The starting point is the point on the gradient line where the color starts. It is defined by the intersection between the gradient line and a perpendicular passing by the box corner which is in the same quadrant.

Similarly the ending point is the point on the gradient line where the final color is reached. It can also be defined by an intersection between the gradient line and a perpendicular line issued by the nearby corner, but is more easily defined as the symmetric of the starting point, when a point reflection with an origin confounded with the center of the box.

These somewhat complex definitions of the starting and ending points lead to an interesting property sometimes called magic corners : the nearby corners of the starting and ending points also have the same color than the starting, and respectively ending, point.

More than two colors, the start- and end-point colors, can be involved in a linear gradient : by defining color-stop points on the gradient line, the web developer can control the colorization by setting which color should be done at these points. A color-stop point can be implicitly defined, and in those cases, it is placed half-way between the point that precedes it and the one that follows it. It can also be explicitly positioned, by using a <length> or a <percentage> CSS data type.

These color-points allow to define gradients which really are the concatenation of several basic linear-gradient. But, the linear-gradient syntax does not allow repeating gradients. For such a functionality, use the repeating-linear-gradient CSS property.

Gradients, and among them liner-gradient too, are defined as CSS <image> data types. Therefore they can be used at anywhere in CSS where an image data type is required. But, Gecko currently only supports CSS gradients as values of the background-image property, as well as within the shorthand background . [1]

Syntax

linear-gradient( [ [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )

Vendor prefixes: See the compatibility table below for detail on the vendor prefixes you'll need to use for gradients.

Where:

<color-stop>

<color> [ <percentage> | <length> ]

Values

<side-or-corner>
Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keyword is optional.
The values to top, to bottom, to left and to right are translated into the angles 0deg, 180deg, 270deg, 90deg respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <color-stop> will exactly apply to the corner point. This is sometimes called the "magic corner" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.
<angle>
An angle of direction for the gradient. See <angle> .
<color-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.

History of the syntax

The syntax of linear-gradient greatly evolved since the first Apple proposal implemented in 2008:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

This syntax was awkward, the same function was used to create both linear and radial gradients and the parameters needed in each case were different, meaning that the valid syntax vary with the value of the first parameter. This won't scale if other types of gradients, like conical gradients, are added in the future. Several parameters must to be defined using a function like to(), from() or color-stop()and <point> may be unit-less values, that is <number> , when CSS usually uses <length> for coordinates. Finally no draft was proposed to the W3C.[2]

Therefore an alternative syntax was proposed and implemented by Mozilla in 2009: there is now two CSS functions, one for linear gradients, and the other for radial gradients. It never shipped in a release product as a third syntax pushed it further and simplified the syntax for linear gradients to:

-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

There is no more need for to(), from()and color-stop() in this new syntax and were dropped, the order of the top/bottom and left/right keywords being irrelevant, Mozilla removed the constraint of having top/bottom defined first, in the same way than used by . The syntax had one drawback, it allows only vertical and horizontal gradients.

This syntax was proposed to the W3C and was added in 2011 into the CSS Images Values and Content Replacement Level 3 draft with two more changes[3], solving the limitation on the direction of gradients:

  • The support of an <angle> as an origin, allowing gradients of any direction.
  • The definition of the magic corner algorithm which eases the work of Web developers by allowing an easy definition of the exact color at the corners.

The color interpolation is also defined as happening in the pre-multiplied color space, in order to prevent non esthetic grey to appear when using color with different opacity. This syntax was implemented, prefixed, by both Webkit, without dropping the original one, and Trident (IE 10)[4]:

linear-gradient([ [ [ <angle> | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

Unfortunately, the adding of the <angle> values to the syntax introduced an incoherence: the angle indicated a destination, but the keywords a starting point.# This was fixed by a new syntax where the keyword are directions too, and preceded by the to keyword.

linear-gradient([ [ [ <angle> | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

This should be the final syntax, but the specification hasn't reached the Candidate Recommendation status yet.

A last semantic curiosity still exists between the prefixed variants and the unprefixed proposal. Following the initial Apple proposal, the prefixed variants of the syntax all uses the an <angle> defined like polar angles, that is with 0deg representing the East. To be coherent with the rest of CSS, the specification defines an angle with 0deg representing the North. To prevent sites using prefixed version of the property to get suddenly broken, even when adapting to the otherwise forward-compatible final syntax, they keep the original angle definition (0deg = East). They will switch to the correct spec when unprefixing the property. Also, as they aren't incompatible, Gecko supports, prefixed, both the syntax with the to keyword and without. Here again, the syntax without the keyword will be dropped when unprefixing.

Examples

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: linear-gradient(to right, 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 repeating-linear-gradient .

Example: Using transparency

Linear with transparency
background-image: linear-gradient(to bottom right, 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%.

Specifications

Specification Status Comment
CSS Image Value and Replaced Content Module Level 3 Candidate Recommendation  

Browser compatibility

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 3.6 (1.9.2) -moz bug 479220 [3] 10.0 (534.16) -webkit [2][3] 10.0 -ms[1] 11.10 -o [3] 5.1 -webkit[2][3]
Legacy webkit syntaxNon-standard -- 3 -webkit [2] -- -- 4.0 -webkit[2]
Legacy from syntax (without to) Non-standard 3.6 (1.9.2) -moz [4] 10.0 (534.16) -webkit [2] 10.0 -ms [5] 11.10 -o[4] 5.1 -webkit[2]
to syntax

10.0 (10) -moz bug 685400 [4]

-- -- 11.60 -o[4] --

[1] Internet Explorer 5.5 through 8.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

[2] 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.

[3] Gecko, Opera & Webkit considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top. [6] [7]

[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a from position. The to syntax has been added in Firefox 10 and Opera 11.60 [8], without removing the deprecated syntax and translation between the two is trivial:

-moz-linear-gradient(to top left, blue, red);

is the same as:

-moz-linear-gradient(bottom right, blue, red);

The legacy syntax, without to, is planned to go away when the prefix is removed.

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(to bottom, hsl(0, 80%, 70%), #BADA55); /* current standard, but unimplemented and subject to change */

}

Tags (8)

Edit tags

Attachments (2)

FileSizeDateAttached by 
linear-gradient.png
The gradient line in action
26.81 kB12:37, 7 Dec 2011TeoliActions
 lingradexample.png
Linear Gradient Example
71.68 kB23:56, 11 Nov 2009crayzeepeteActions

Attach file