Линейный градиент задается при помощи свойства background и специальной функции linear-gradient.
Самый простой вариант задания линейного градиента: background: linear-gradient (red, blue).
Добавим НЕОБЯЗАТЕЛЬНЫЙ параметр – направление, которое по умолчанию направлено сверху вниз: background: linear-gradient (to bottom, red, blue). Обратите внимание на наличие обязательной приставки to.
Цвет также можно задавать прозрачным при помощи ключевого слова transparent.
Вместо направления можно использовать угол: background: linear-gradient (45deg, red, blue). При указании градусов направление изменяется по часовой стрелке. Также можно задавать градус в отрицательных значениях: background: linear-gradient (-45deg, red, blue).
Точки переход цвета можна задавать:
- либо в пикселях: background: linear-gradient (to right, red 0px, red 100px, blue 200px);
- либо в процентах: background: linear-gradient (to right, red 0%, red 20%, blue 50%).
Первые и последние значения точек перехода можно не ставить, без значений они автоматом устанавливаются в 0% и 100%.
При помощи линейного градиента можно сделать на фоне элемента ровные цветные полосы: background: linear-gradient (red 0, red 33%, blue 33%, blue 66%, green 66%, green 100%).
Также можно задавать сразу несколько градиентов (через запятую): background: linear-gradient (to bottom, red, blue), linear-gradient (to right, green, transparent).
При этом, один из цветов «верхнего» градиента должен быть прозрачным, иначе второй будет не виден.
Градиент – это тоже фон, поэтому при задании свойства background-size размер градиента будет ограничен.
Пример:
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
background-repeat: repeat;
Для кроссбраузерности необходимо использовать вендорные префиксы moz-, webkit-, o-. При этом для старых браузеров направление градиента задавалось без приставки to!
Градиент можно применять для границ элементов (свойство border-image с градиентом).
