Nossos voluntários ainda não traduziram este artigo para o Português (do Brasil). Junte-se a nós e ajude-nos a fazer o trabalho!
Você também pode ler o artigo em English (US).

The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image>.

As with any gradient, a linear gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.

To create a linear gradient that repeats so as to fill its container, use the repeating-linear-gradient() function instead.

Because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. For this reason, linear-gradient() won't work on background-color and other properties that use the <color> data type.

Composition of a linear gradient

A linear gradient is defined by an axis—the gradient line—and two or more color-stop points. Each point on the axis is a distinct color; to create a smooth gradient, the linear-gradient() function draws a series of colored lines perpendicular to the gradient line, each one matching the color of the point where it intersects 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 colors of the gradient are determined by two or more points: the starting point, the ending point, and, in between, optional color-stop points.

The starting point is the location on the gradient line where the first color begins. The ending point is the point where the last color ends. Each of these two points is defined by the intersection of the gradient line with a perpendicular line passing from the box corner which is in the same quadrant. The ending point can be simply understood as the symmetrical point of the starting point. These somewhat complex definitions lead to an interesting effect sometimes called magic corners: the corners nearest to the starting and ending points have the same color as their respective starting or ending points.

By adding more color-stop points on the gradient line, you can create a highly customized transition between the starting and ending colors. A color-stop's position can be explicitly defined by using a <length> or a <percentage>. If you don't specify the location, it is placed halfway between the one that precedes it and the one that follows it.

Syntax

/* A gradient tilted 45 degrees,
   starting blue and finishing red */
linear-gradient(45deg, blue, red);

/* A gradient going from the bottom right to the top left corner,
   starting blue and finishing red */
linear-gradient(to left top, blue, red);

/* A gradient going from the bottom to top,
   starting blue, turning green at 40% of its length,
   and finishing red */
linear-gradient(0deg, blue, green 40%, red);

Values

<side-or-corner>
The position of the gradient line's starting point. If specified, it consists of the word to and up to two keywords: one indicates the horizontal side (left or right), and the other the vertical side (top or bottom). The order of the side keywords does not matter. If unspecified, it defaults to to bottom.
The values to top, to bottom, to left, and to right are equivalent to the angles 0deg, 180deg, 270deg, and 90deg respectively. The other values are translated into an angle.
<angle>
The gradient line's angle of direction. A value of 0deg is equivalent to to top; increasing values rotate clockwise from there.
<color-stop>
A color-stop's <color> value, followed by an optional stop position (either a <percentage> or a <length> along the gradient's axis).

Note: Rendering of color stops in CSS gradients follows the same rules as color stops in SVG gradients.

Formal syntax

linear-gradient( 
  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops  

where <side-or-corner> = [left | right] || [top | bottom]
  and <color-stop>     = <color> [ <percentage> | <length> ]?

Examples

Gradient at a 45-degree angle

body {
  background: linear-gradient(45deg, red, blue);
}

Gradient that starts at 60% of the gradient line

body {
  background: linear-gradient(135deg, orange, orange 60%, cyan);
}

Note: Please see Using CSS gradients for more examples.

Specifications

Specification Status Comment
CSS Images Module Level 4
The definition of 'Gradient Color-Stops' in that specification.
Working Draft Adds interpolation hints.
CSS Images Module Level 3
The definition of 'linear-gradient()' in that specification.
Candidate Recommendation Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 26
Full support 26
Full support 10
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Full support 3.6
Prefixed Notes
Prefixed Requires the vendor prefix: -moz-
Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Notes 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.
Full support 49
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Requires the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10
Notes
Full support 10
Notes
Notes Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: -ms-filter: progid:DXImageTransform.Microsoft.Gradient().
Opera Full support 12.1
Full support 12.1
No support 11 — 15
Prefixed Notes
Prefixed Requires the vendor prefix: -o-
Notes 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.
Full support 15
Prefixed Notes
Prefixed Requires the vendor prefix: -webkit-
Notes 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.
Safari Full support 6.1
Full support 6.1
Full support 5.1
Prefixed Notes
Prefixed Requires the vendor prefix: -webkit-
Notes Safari 4 was supporting an experimental -webkit-gradient(linear,…) function. It is more limited than the later standard version: you cannot specify both a position and an angle like in linear-gradient(). This old outdated syntax is still supported for compatibility purposes.
Notes 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.
WebView Android Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Chrome Android Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Mobile Full support YesFirefox Android Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Full support 4
Prefixed Notes
Prefixed Requires the vendor prefix: -moz-
Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Notes 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.
Full support 49
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Requires the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
to keywordChrome Full support 26Edge Full support 12Firefox Full support 10IE Full support 10Opera Full support 12.1Safari Full support 6.1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 10Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
Interpolation Hints / Gradient MidpointsChrome Full support 40Edge No support NoFirefox Full support 36IE No support NoOpera Full support 27Safari Full support 6.1WebView Android Full support 40Chrome Android Full support 40Edge Mobile No support NoFirefox Android Full support 36Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
Unitless 0 for <angle>Chrome Full support 26Edge Full support 12Firefox Full support 55
Full support 55
Partial support 46
Notes
Notes Accepted only in -webkit-linear-gradient() and -moz-linear-gradient(), not linear-gradient().
IE No support NoOpera Full support 16Safari Full support 6.1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 55
Full support 55
Partial support 46
Notes
Notes Accepted only in -webkit-linear-gradient() and -moz-linear-gradient(), not linear-gradient().
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also