Функция linear-gradient()
Линейный градиент начинается сверху. Начинается красный цвет, переходящий в желтый, затем в синий:
#grad {
background-image: linear-gradient(red, yellow, blue);
}
Попробуйте сами »
Определение linear-gradient()
Функция linear-gradient()
устанавливает линейный градиент в качестве фонового изображения.
Чтобы создать линейный градиент, необходимо определить как минимум две точки цвета. Цветовые остановки — это цвета, между которыми вы хотите сделать плавные переходы. Вы также можете установить начальную точку и направление (или угол) вместе с эффектом градиента.
Пример линейного градиента:
Версия: | CSS3 |
---|
Поддержка браузера linear-gradient()
Цифры в таблице указывают первую версию браузера, полностью поддерживающую данную функцию.
Числа, за которыми следуют -webkit-, -moz- или -o-, указывают первую версию, которая работала с префиксом.
Функция | |||||
---|---|---|---|---|---|
linear-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
CSS Синтаксис linear-gradient()
background-image: linear-gradient(direction, color-stop1,
color-stop2, ...);
Значение | Описание |
---|---|
direction | Определяет начальную точку и направление (или угол) вместе с эффектом градиента. |
color-stop1, color-stop2,... | Цветовые остановки — это цвета, между которыми вы хотите сделать плавные переходы. Это значение состоит из значения цвета, за которым следует необязательная позиция остановки (процент от 0% до 100% или длина по оси градиента). |
Ещё примеры linear-gradient()
Линейный градиент, начинающийся слева. Он начинается красным, переходящим в синий:
#grad {
background-image: linear-gradient(to right, red , blue);
}
Попробуйте сами »
Линейный градиент, который начинается слева вверху (и заканчивается справа внизу):
#grad {
background-image: linear-gradient(to bottom right, red , blue);
}
Попробуйте сами »
Линейный градиент с заданным углом:
#grad {
background-image: linear-gradient(180deg, red, blue);
}
Попробуйте сами »
Линейный градиент с несколькими точками цвета:
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Попробуйте сами »
Линейный градиент с прозрачностью:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
Попробуйте сами »
Похожие страницы linear-gradient()
CSS учебник: CSS Градиенты