# linear-gradient function

The `linear-gradient` function specifies a linear gradient. It applies to properties that specify a background image: `background`, `background-image` or border image: `border-image`, `background-image-source`.

## Syntax

`selector { background: linear-gradient([angle or direction], color1 length1, color2 length2...); }`

## Values

Value | Description
--- | ---
direction | Sets a specific gradient direction in any angle units or with the `top`, `left`, `right`, `bottom` keywords or their combination: `top left`, `top right` and so on. The order of the words is not important: you can write `top left` and `left top`, there is no difference. The parameter is optional: if you do not write it, the gradient will go from top to bottom (as with `to top`). The direction is preceded by the word `to`.
angle | An angle in any angle units. Can be positive or negative. The parameter is optional. Either the angle or the direction (or nothing at all) can be specified at the same time.
color1 | The starting color of the gradient in any color units.
color2 | The ending color of the gradient in any color units.
length | Sets the extent of a specific gradient color in any size units.

## Example . The simplest option

Syntax:

`selector { background: linear-gradient(starting color, ending color); }`

Let's look at an example:

`<div id="elem"></div>` `#elem { background: linear-gradient(black, red); width: 200px; height: 200px; }`

:

## Example . Let's add an angle

Syntax:

`selector { background: linear-gradient(angle, starting color, ending color); }`

Let's look at an example:

`<div id="elem"></div>` `#elem { background: linear-gradient(45deg, black, red); width: 200px; height: 200px; }`

:

## Example . Let's add a direction

Instead of an angle, you can add the `top`, `left`, `right`, `bottom` direction, or a combination of them: `top left`, `top right`. The direction is preceded by the `to` word.

Syntax:

`selector { background: linear-gradient(direction, starting color, ending color); }`

Let's look at an example:

`<div id="elem"></div>` `#elem { background: linear-gradient(to left, black, red); width: 200px; height: 200px; }`

:

## Example . Let's add a direction

Let's point another direction:

`<div id="elem"></div>` `#elem { background: linear-gradient(to top left, black, red); width: 200px; height: 200px; }`

:

## Example . Let's add a length

Syntax:

`selector { background: linear-gradient(color1 length1, color2 length2); }`

In the following example the behavior will be as follows: pure red will be from `0px` to `30px`, from `30px` to `50px` there will be a gradient from red to blue, and from `50px` to the end - pure blue:

`<div id="elem"></div>` `#elem { background: linear-gradient(red 30px, blue 50px); width: 200px; height: 200px; }`

:

## Example . Let's add more than `2` colors

Syntax:

`selector { background: linear-gradient(color1 length1, color2 length2, color3 length3...); }`

In the following example the behavior will be as follows: pure red will be from `0px` to `30px`, from `30px` to `50px` there will be a gradient from red to blue, and from `50px` to `70px` - a gradient from blue to green, and after `70px` - pure green:

`<div id="elem"></div>` `#elem { background: linear-gradient(red 30px, blue 50px, green 70px); width: 200px; height: 200px; }`

:

## Example . Sharp transitions

In the following example, the behavior will be as follows: pure red will be from `0px` to `30px`, pure blue - from `30px` to `60px`, pure green - after `60px` (you don’t have to write `red 0px`):

`<div id="elem"></div>` `#elem { background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px); width: 200px; height: 200px; }`

:

## Example . Length can also be specified as percentages

In the following example, the behavior will be as follows: pure red will be from `0%` to `30%`, pure blue - from `30%` to `60%`, pure green - after `60%` (you don’t have to write `red 0%`):

`<div id="elem"></div>` `#elem { background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%); width: 200px; height: 200px; }`

:

## Example . Combination with background-size

In the following example, the behavior will be as follows: pure red will be from `0px` to `30px`, pure blue - from `30px` to `60px`, and all this will be repeated in `60px` section (due to `background-size: 60px;`):

`<div id="elem"></div>` `#elem { background: linear-gradient(to right, red 30px, blue 30px, blue 60px); background-size: 60px 60px; width: 200px; height: 200px; }`

:

## See also

- the `radial-gradient` function
  that creates a radial gradient
- the `repeating-linear-gradient` function
  that creates a repeating linear gradient
- the `repeating-radial-gradient` function
  that creates a repeating radial gradient

← →
↑
en ru