EN
Ce contenu n’est pas disponible dans votre langue. Voici la version anglaise.

linear-gradient() function

Specifies a linear gradient, in which colors transition smoothly along a line, by specifying a gradient line and two or more stop colors and offsets.

Internet Explorer 10

Syntax

linear-gradient

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

Parameters

angle

Optional. The angle the gradient line should assume, expressed as a number followed by an angle units designator (for instance, "deg").

"0deg" points upward and positive angles increase in a clockwise direction. Therefore, "90deg" points toward the right, "180deg" points downward, and so on.

If no angle is provided, the gradient line starts in the corner or side opposite the corner or side specified by <side-or-corner>.

side-or-corner

Optional value that specifies an ending corner or side for the gradient. This value begins with "to", which is followed by one or two of the following keywords. Including one keyword specifies an ending side, and two keywords specify an ending corner.

  • The following values can be used as the first value only:
    • left   Indicates gradient ends on the left.
    • right   Indicates gradient ends on the right.
  • The following values can be used as the second value only:
    • top   Indicates gradient ends on the top.
    • bottom   Indicates gradient ends on the bottom.
  • Not including any keywords or angle is equivalent to "to bottom".
color-stop

At least two color stops are required. Each color stop has one or two components—a color component and an optional position component.

The first component defines the color component of a stop point for the gradient. Each stop point has its own designated color, and the area between each point is filled with a continuous color transition from one to the other. This value can be any supported color value.

Each stop point can have an optional percentage or supported length value that indicates where along the gradient line to place the color stop. "0%" (or "0px", "0em", and so on) indicates the starting point (or side); "100%" indicates the ending point (or side).

Remarks

Do not use the Microsoft vendor prefix ("-ms-") before the Cascading Style Sheets (CSS) gradients functions. They are supported unprefixed in Internet Explorer 10 and later.

Examples

The following linear gradient (used as the argument for the background-image property) has three color stops:

  • The first color stop is in the top-right corner and defines a gradient line that extends to the bottom-left corner. The first stop is a shade of yellow.
  • The second color stop is halfway along the gradient line and is a shade of green.
  • The final color stop is 80% of the way along the gradient line and is a shade of blue. From this stop to the end of the gradient line (between 80% and 100%), the color remains this shade of blue.

The gradient line starts in the top-right corner of the rectangle and ends in the bottom-left corner. The actual angle depends on the dimensions of the element that the gradient fills.

Image of a linear gradient in a rectangle.

background-image: linear-gradient(to bottom left, #FFF133 0%, #16D611 50%, #00A3EF 80%);

To replicate this gradient using an angle with the same size box (250px×150px), you would specify the following:


background-image: linear-gradient(210deg, #FFF133 0%, #16D611 50%, #00A3EF 80%);

Of course, if the size of the fill area changes, these two gradients look different. Keep this in mind when deciding how to specify your gradients. The first defined gradient (with "to bottom left" specified) is pictured here in a 450px-by-150px box.

Image of a linear gradient in a wider rectangle than the first

The second defined gradient (with "210deg" specified) is pictured here in the same size box.

Image of another gradient in a wide rectangle, with more yellow showing

See also

CSS Gradient Background Maker

 

 

Afficher:
© 2014 Microsoft. Tous droits réservés.