Градиент из двух и более любых цветов

Основные формы градиента

  • Линейный — переход происходит по прямой линии.
  • Повторяющиеся линейный градиент.
  • Отражённый — состоит из линейного градиента и его воображаемого отражения в зеркале.
  • Круговой — напоминает собой алмаз.
  • Радиальный — переход происходит от центра к краям в виде круга.
  • Повторяющиеся радиальный градиент.
  • Спиральный (CW/CCW) — переход происходит от центра к краям в виде спирали.
  • Конический (конусный) симметричный — плавный переход вдоль длины окружности.
  • Конический ассиметричный — плавный переход вдоль длины окружности.
  • Повторяющиеся конический.

Стилевая функция *-gradient() добавляет градиент к фону элемента. Выступает значением свойства background-image или background.

linear-gradient() добавляет линейный градиент.
repeating-linear-gradient() бесконечно повторяющийся линейный градиент, имеет те же параметры, но после последнего цвета повторяется с первого.

Синтаксис:
background-image: linear-gradient([<угол> | to <позиция>]?, <цвет> [, <цвет>]*);
background-image: repeating-linear-gradient([<угол> | to <позиция>]?, <цвет> [, <цвет>]*);

Направление градиента

Наклон направления градиентной линии задаёт положительное или отрицательное значение угла в градусах по часовой стрелке, начинается снизу вверх равное нулю.
Указывается так 0deg или to top.

ПозицияУголОписание направления
 
 to top
 
 0deg
Снизу - Вверх
 
 to bottom
 
 180deg
Сверху - Вниз
 
 to right
 
 90deg или -270deg
Слева - Направо
 
 to left
 
 270deg или -90deg
Справа - Налево
 
 to top left
 
 -45deg
От правого нижнего - К верхнему левому
 
 to top right
 
 45deg
От левого нижнего - К верхнему правому
 
 to bottom left
 
 225deg
От правого верхнего - К нижнему левому
 
 to bottom right
 
 -225deg
От левого верхнего - К нижнему правому
 
По умолчанию

Многоцветный градиен

Добавление любого количества цветов по-умолчанию будут равномерно распределены вдоль оси направления
3 цвета: 0%, 50%, 100%  
4 цвета: 0%, 33%, 67%, 100%  
5 цвета: 0%, 25%, 50%, 75%, 100%  
и тд.

Можно установить определённые позиции цвета для этого используются проценты (%) или пиксели (px)

background-image: linear-gradient(red 5%, blue 33%);

CSS3 и недостаток

Вместо одной строки в CSS (как нам это обещает спецификация, например linear-gradient(right top, yellow, blue);), в настоящее врямя приходиться писать отдельные определения для FF (-moz-) и webkit-браузеров (-webkit-), Opera (-o-), а также фильтр для IE (-ie-). Кроме того, все равно остается ряд браузеров, которые не поймут этих свойств. Для них придется применять JavaScript, что, конечно, скажется на быстродействии.
CSS функции linear-gradient и radial-gradient, описанные в проектах спецификации CSS3 дают нам мощный механизм создания градиентов. Но, так как фактически данная спецификация еще не окончена, пройдет, наверно, немало времени, пока мы сможем использовать эту мощь в своей работе. Тем не менее, все большее число браузеров в том или ином виде поддерживает CSS-градиенты, в этот список уже входят IE6-8+, Firefox 3.6+, Safari 4.0+, Chrome 2.0+. Учитывая, что используя JavaScript можно реализовать градиент и для других браузеров, то новый метод имеет право на жизнь. Но с другой стороны, стоит ли использовать эти громоздкие методы для такой типичной и часто встречающейся задачи? Помните, в нашем арсенале всегда остается и старый метод реализации градиента с помощью фонового рисунка.

...