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

Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/css/linear-gradient/index.md) .

[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .

#### Дополнительная информация:

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

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

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

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

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

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

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

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

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

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

Для того, чтобы сделать его слева направо, добавьте дополнительный параметр в начале линейного градиента () , начиная со словом , **к** которому указывает направление:
```
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)