Функция 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: to top, to bottom
и так далее.
Синтаксис:
селектор {
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,
которая создает повторяющийся радиальный градиент