# Функция linear-gradient

Функция `linear-gradient` задает линейный градиент. Применяется к свойствам, которые задают картинку фона: `background`, `background-image` или картинку границы: `border-image`, `background-image-source`.

## Синтаксис

`селектор { background: linear-gradient([угол или направление], цвет1 размер1, цвет2 размер2...); }`

## Значения

Значение | Описание
--- | ---
направление | Задает определенное направление градиента в любых единицах для углов либо ключевыми словами `top`, `left`, `right`, `bottom` или их комбинацией: `top left`, `top right` и так далее. Порядок слов не важен: можно писать `top left` и `left top`, разницы нет. Параметр необязательный: если его не написать, градиент будет идти сверху вниз (как при `to top`). Перед направлением ставится слово `to`.
угол | Угол в любых единицах для углов. Может быть положительным или отрицательным. Параметр необязательный. Одновременно может быть задан или угол, или направление (или вообще ничего).
цвет1 | Начальный цвет градиента в любых единицах для цвета.
цвет2 | Конечный цвет градиента в любых единицах для цвета.
размер | Задает протяженность определенного цвета градиента в любых единицах для размера.

## Пример . Самый простой вариант

Синтаксис:

`селектор { background: linear-gradient(начальный цвет, конечный цвет); }`

Посмотрим на примере:

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

:

## Пример . Добавляем угол

Синтаксис:

`селектор { background: linear-gradient(угол, начальный цвет, конечный цвет); }`

Посмотрим на примере:

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

:

## Пример . Добавляем направление

Вместо угла можно добавить направление `top`, `left`, `right`, `bottom` или их комбинацию: `top left`, `top right` Перед направлением ставится слово `to`.

Синтаксис:

`селектор { background: linear-gradient(направление, начальный цвет, конечный цвет); }`

Посмотрим на примере:

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

:

## Пример . Добавляем направление

Укажем другое направление:

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

:

## Пример . Добавляем размер

Синтаксис:

`селектор { background: linear-gradient(цвет1 размер1, цвет2 размер2); }`

В следующем примере поведение будет следующее: чистый красный цвет будет от `0px` до `30px`, от `30px` до `50px` будет градиент от красного до голубого, а от `50px` и до конца - чистый голубой:

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

:

## Пример . Добавляем более чем `2` цвета

Синтаксис:

`селектор { background: linear-gradient(цвет1 размер1, цвет2 размер2, цвет3 размер3...); }`

В следующем примере поведение будет следующее: чистый красный цвет будет от `0px` до `30px`, от `30px` до `50px` будет градиент от красного до голубого, а от `50px` и до `70px` - градиент от голубого до зеленого, а после `70px` - чистый зеленый:

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

:

## Пример . Резкие переходы

В следующем примере поведение будет следующее: чистый красный цвет будет от `0px` до `30px`, чистый голубой - от `30px` до `60px`, чистый зеленый - после `60px` (`red 0px` можно и не писать):

`селектор { background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px); }`

## Пример . Размеры можно задавать и в процентах

В следующем примере поведение будет следующее: чистый красный цвет будет от `0%` до `30%`, чистый голубой - от `30%` до `60%`, чистый зеленый - после `60%` (`red 0%` можно и не писать):

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

:

## Пример . Сочетание с background-size

В следующем примере поведение будет следующее: чистый красный цвет будет от `0px` до `30px`, чистый голубой - от `30px` до `60px`, при этом все это будет повторяться кусочками по `60px` (из-за `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; }`

:

## Смотрите также

- функцию `linear-gradient`,
  которая создает линейный градиент
- функцию `radial-gradient`,
  которая создает радиальный градиент
- функцию `repeating-linear-gradient`,
  которая создает повторяющийся линейный градиент
- функцию `repeating-radial-gradient`,
  которая создает повторяющийся радиальный градиент

←→
↑