---
title: Linear Gradient
localeTitle: Линейный градиент
---
## Линейный градиент

В линейном градиенте цвета движутся в одном направлении, т.е. слева направо, сверху вниз или под любым выбранным вами углом.

![Градиент с двумя цветовыми остановками](https://cdn.discordapp.com/attachments/261391445074771978/371707961422118912/image.png)

**Линейный градиент с двумя цветами**

### Синтаксис

Чтобы создать линейный градиент, вы должны определить как минимум две цветовых остановки. (Это цвета, из которых создаются переходы). Он объявляется либо в свойстве **background**, либо в **background-image**.
```
background: linear-gradient(direction, colour-stop1, colour-stop2, ...); 
```

**Примечание. Если ни одно направление не указано, переход по умолчанию сверху вниз**

### Различные градиентные переходы 

**Сверху вниз:**
```
background: linear-gradient(red, yellow); 
```

![Сверху вниз](https://cdn.discordapp.com/attachments/261391445074771978/371702268803809301/image.png)

**Слева направо:**

Для того, чтобы сделать его слева направо, добавьте дополнительный параметр вида **to direction**, где direction - направление градиента.
```
background: linear-gradient(to right, red , yellow); 
```

![Слева направо](https://cdn.discordapp.com/attachments/261391445074771978/371702990161051648/image.png)

**Диагональные позиции:**

Вы также можете переместить градиент по диагонали, указав горизонтальные и вертикальные начальные положения, например, левый верхний или нижний правый.

Вот пример градиента, начинающийся в верхнем левом углу,
```
 background: linear-gradient(to bottom right, red, yellow); 
```

![Верхний левый](https://cdn.discordapp.com/attachments/261391445074771978/371705382105776128/image.png)

### Использование углов для указания направления градиентов

Вы также можете использовать углы, чтобы быть более точными при указании направления градиента:
```
background: linear-gradient(angle, colour-stop1, colour-stop2); 
```

Угол определяется как угол между горизонтальной линией и градиентной линией.
```
background: linear-gradient(90deg, red, yellow); 
```

![90 градусов](https://cdn.discordapp.com/attachments/261391445074771978/371710718698848256/image.png)

### Использование нескольких цветов

Вы не ограничены только двумя цветами, вы можете использовать столько разделенных запятыми цветов, сколько хотите.
```
background: linear-gradient(red, yellow, green); 
```

![Градиент с 3-мя цветами останавливается](https://cdn.discordapp.com/attachments/261391445074771978/371706534591201281/image.png)

Вы можете также использовать другие цветовые синтаксисы, такие как RGB или шестнадцатеричные коды, чтобы указать цвета.

### Жестко заданные цветовые остановки

Вы можете не только использовать градиенты для перехода с затухающими цветами, но также можете использовать его для немедленного перехода от одного сплошного цвета к другому сплошному цвету
```
background: linear-gradient(to right,red 15%, yellow 15%); 
```

![Жесткий цвет останавливается](https://cdn.discordapp.com/attachments/261391445074771978/371716730046775318/image.png)

#### Дополнительная информация
[Линейный градиент в Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)