Linear-gradient() - Function CSS

Syntax diagram of linear-gradient().

On the diagram, the terms in bold are the predefined words of CSS, the other terms are described below:

• colorspace is a color space, among those recognized by CSS: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, xyz-d65.
• angle is a numeric value followed by one of the CSS angle units.

The terms used on the color list are described below:

• color is a color, defined by one of the syntaxes recognized by CSS (see Colors).
• stop1 and stop2 are numeric values followed by one of the CSS dimension units or percentages evaluated against the length of the gradient line.
• transition is also a dimension or percentage calculated relative to the length of the gradient line.
• As many colors as needed (2 minimum) can be specified by separating them with commas.

Description of the linear-gradient() function.

The linear-gradient() function defines a linear gradient of color. That is to say that the variation of colors is carried out along a line whose inclination can be chosen. This gradient can be substituted for an image in any properties that expect an image but its use is especially frequent with background-image.

Careful! Gradients cannot be used in place of a color, but only in place of an image.

What is gradients in CSS?

A gradient consists of gradually moving from one color to another, or even linking several colors in a progressive way.

Three types of gradients.

These three types of gradients are distinguished by the way the colors evolve: following a line, from a point, following a circumference...

The linear gradient.

The colors evolve in a straight line, which can be horizontal or vertical, but can also be directed at an angle.
Linear gradients are defined by the linear-gradient() function, whose syntax and described further down this page.
Apart from the colors, the main parameter is the angle of this axis of color variation. By default, the gradient scales from top to bottom.

The radial gradient.

Colors evolve from a point, often central, and in all directions.
Gradients of this type are defined by the radial-gradient() function.
The colors are configurable of course, but also the coordinates of the starting point of the gradient. Without indication, the gradient starts in the middle of the element and evolves towards the edges.

The conic gradient.

Colors evolve according to a circumference, in other words according to the angle. The name "conical" comes from the fact that, if the colors are well chosen, it can look like a conical shape when viewed from above.
Conic gradients are defined by the conic-gradient() function.
The parameters are the colors and the starting angle. By default, the latter is at 0 degrees, as shown in the diagram.

Note: The examples in this tutorial were built with a linear gradient, but the principle is exactly the same with other gradient shapes (radial and conical).

The gradient line.

The gradient line is the path along which the gradient evolves. For linear or circular gradients, the gradient line is a straight line. For conical gradients, it's a circle or an ellipse.

Unpositioned Colors.

Without any special indication, gradients adapt to the dimensions of the element on which they are applied. The color varies gradually along the entire gradient line. If the gradient has multiple colors, they distribute the space equally.

But it is possible, as we will see later, to fix, on the one hand, the overall dimensions of the gradient, but also the position of each of the colors.

The three colors of this gradient are not positioned. They divide the space equally: one third for each color.

Gradient evolution of 3 unpositioned colors

Positioned Colors.

This gradient also has three colors but they are positioned: it is indicated in the CSS code that the second color should be at 10%, and the third color should be at 20% of the gradient line. You can clearly see that the gradient runs over the first quarter of the width, with the rest of the element filled with a fixed color.

The position of the colors can be outside the element, i.e. with negative percentages or greater than 100%. In this case, the gradient starts and ends outside the element, but is only visible on the element.

This gradient is made up of three colors, all of which are positioned. Note: The lightGreen color has been repeated so that there is no color variation on the central part of the element.

It is possible to specify two positions for each color. Between the two positions the color does not vary. This avoids having to repeat the name of a color as we did in the previous example.

By specifying identical positions for two successive colors, the gradient effect can be undone. We simply obtain a multicolored background.

Transition indicators.

A percentage (or dimension) indicated on its own, without color information, is a transition indicator. It indicates where the middle color is located. This allows you to define a non-linear progression between two colors.

The indicator of transition between blue and pink has been set at 25%. We see that the transition from one color to another does not done in a linear way between the beginning and the end.

Gradients with repetition.

In the case of a gradient that the size is set smaller than the size of the element, The classic gradient finishes the fill with the last color of the gradient, without changing it.

Gradients with repetition, on the other hand, will repeat the initial gradient as many times as necessary to cover the entire surface of the element.

Gradients with repetition can be obtained with the following functions:

• repeating-linear-gradient() for linear gradients.
• repeating-radial-gradient() for radial gradients.
• repeating-conic-gradient() for conic gradients.

The linear-gradient() function can be used with:

• background-image : Defines the background image or gradient (multiple images or gradients can coexist).
• border-image : Shorthand of border properties made with images.
• image-set() : Offers the browser a choice of images so that it can choose the most suitable one (resolution, format, etc.).
• list-style-image : Defines a custom image to be used in place of bullets, in the context of a list enumeration.
• mask-image : Specifies the image or SVG file that will be used as a mask.

Syntax of the linear-gradient() function.

The linear-gradient() function, like other gradient functions, supports multiple syntaxes because most of its parameters are optional.

• background: linear-gradient(#add8e6, #ffa07a, ....); c1 c2 cn

  c1 to cn define the colors of the gradient. They can be expressed in any of the syntaxes recognized by CSS (see Colors).

  At least two colors must be specified. Much more can be indicated. The gradient is by default from top to bottom.

  linear-gradient(#add8e6, #ffa07a)
• background: linear-gradient(90deg, #add8e6, #ffa07a, ...); a c1 c2 cn

  a is a numerical value followed by an angular unit (see the CSS angle units).
  c1 through cn are colors, as in the previous syntax.

  Instead of a numerical value, the angle can be indicated by one of the following predefined values:

  1. to right: the gradient evolves horizontally from the left edge to the right edge.
  2. to left: the gradient evolves horizontally from the right edge to the left edge.
  3. to top: the gradient evolves vertically, from bottom to top.
  4. to bottom: the gradient evolves vertically from top to bottom.
  5. To top left: the gradient changes diagonally from the bottom right corner to the top left corner.
  6. to top right: the gradient moves diagonally from the bottom left corner to the top right corner.
  7. to bottom right: the gradient moves diagonally from the bottom left corner to the bottom right corner.
  8. to bottom left: the gradient changes diagonally from the top right corner to the bottom left corner.

  

• background: linear-gradient(90deg,#add8e6 0%, #ffa07a 30%, #90ee90 100%,...); a c1 p1 c2 p2 c3 p3...

  linear-gradient() accepts a series of comma-separated pairs of values. Each value pair is composed of a color and a numeric value followed by a dimension unit or percentage.
  This makes it possible to position each of the colors in the gradient.
  The positions p1 to pn shall be specified in ascending order.
• background: linear-gradient(90deg, lightBlue 0% 40%, pink 60% 100%); a c1 p1 p1' c2 p2 p2'

  Each of the colors can be followed by two positions. Between these two positions the color does not vary. This is a simplification of writing, which avoids repeating the name of a color when it does not vary.

  This gradient is only between 40% and 60% of the gradient line. It was obtained with:

  lightBlue 0% 40%, pink 60% 100%

  This is equivalent to:

  lightBlue 0%, lightBlue 40%, pink 60%, pink 100%
• background: linear-gradient(90deg, lightBlue 0% 10%, 30%, pink 90% 100%); a c1 p1 p1' t c2 p2 p2'

  The t value is a percentage (or dimension) specified between two decimal points, and without any color indication. This is a transition indicator. It indicates where the middle color should be between the previous color and the next color. This allows you to define non-linear transitions between two colors.
• background: linear-gradient(in srgb 90deg, lightBlue, pink); cs a c1 c2'

  The cs value, introduced by the word in, is used to specify in which color space the interpolations should be calculated. Without indication, interpolations are calculated in the oklab space.

  The examples below show interpolation in three different color spaces. The difference may not be obvious, however, if you look carefully at the interpolation in sRGB we can distinguish a darker area in the transition from red to green. This defect does not appear in oklab, nor in the lab space.

  in oklab
  in srgb
  in lab

  
  The recognized color spaces are constantly evolving. Let us mention: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, xyz-d65, to which we must add hsl, hwb, etc.

Examples.

Here are some examples of how to use gradients, but the possibilities are endless.

Simulator.

Compatibilité et prise en charge suivant les navigateurs.

Current browsers handle support color gradients correctly, including with a percentage indication position after each colors.

Notes:

(1) Internet Explorer supports gradients via its non-standard -ms-filter: progid:DXImageTransform.Microsoft.Gradient() property.

1

Lineargradients

2

linear-gradient()
function

3

Double
stops

Estimated overall support.

96%

96%

95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

1

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Chrome

Edge

Androïd Brower

Chrome pour Androïd

Opéra

Safari

Firefox

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Caniuse

linear-gradient() function historic.

• CSS Images Module Level 3

  Introduction of gradients that can be used instead of an image, and first definition of the linear-gradient() and repeating-linear-gradient() functions.
  

  July 23, 2009

  Working Draft.

  

  April 17, 2012

  Candidate Recommendation.

  

  

• CSS Image Values and Replaced Content Module Level 4

  Gradient functions allow you to specify which color space to use for color interpolation.
  

  September 11, 2012

  Working Draft.

  

  

  

See also: other image manipulations.

The linear-gradient() function is described in the specification CSS Images Module.
The following definitions are also described in this same module.

Properties:

image-orientation

Sets the orientation of an image (should it be rotate of 90°?).

image-rendering

Sets the Image Scaling Mode.

object-fit

Defines how multimedia content (image, video) should adapt to the dimensions of its container.

object-position

Defines the position of an image or video relative to its container.

Functions:

conic-gradient()

Sets a conical color gradient.

⚠

cross-fade()

Mixes multiple images.

element()

Récupère l'aspect d'un élément sous forme d'une image.

⚠

image()

Refers to an image, specifying, if necessary, its reading direction.

image-set()

Offers the browser a choice of images so that it can choose the most suitable one (resolution, format, etc.).

radial-gradient()

Determines a radial color gradient (from the center to the edges).

repeating-conic-gradient()

Sets a conical color gradient, and repeats it across the entire surface of the element.

repeating-linear-gradient()

Determines a linear color gradient and repeats it over the entire surface of the element.

repeating-radial-gradient()

Determines a radial color gradient and repeats it over the entire surface of the element.

⚠

stripes()

Sets a color band image.