Функция CSS linear-gradient()
Пример
Этот линейный градиент начинается сверху. Он начинается красным, переходит в желтый, затем в синий:
#grad {
background-image: linear-gradient(red, yellow, blue);
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Функция linear-gradient() устанавливает линейный градиент в качестве фонового изображения.
Чтобы создать линейный градиент, вы должны определить как минимум две точки цвета. Остановки цвета — это цвета, между которыми вы хотите сделать плавные переходы. Вы также можете установить начальную точку и направление (или угол) вместе с эффектом градиента.
Пример линейного градиента:
Версия: | CSS3 |
---|
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает эту функцию.
Цифры, за которыми следует -webkit-, -moz- или -o-, указывают на первую версию, которая работала с префиксом.
Function | |||||
---|---|---|---|---|---|
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
background-image: linear-gradient(direction, color-stop1,
color-stop2, ...);
Value | Description |
---|---|
direction | Defines a starting point and a direction (or an angle) along with the gradient effect. |
color-stop1, color-stop2,... | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis). |
Дополнительные примеры
Пример
Линейный градиент, начинающийся слева. Он начинается красным, переходя в синий:
#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));
}
Связанные страницы
Учебное пособие по CSS: CSS-градиенты