Градієнт

Градієнти - це спосіб створення плавних переходів між кількома кольорами або кольоровими відтінками. Градієнти можуть бути використані для фонових зображень, тексту, рамок та інших елементів веб-сторінки. Градієнт задають у властивості background, оскільки він є фоновим кольором. Градієнти бувають лінійні, радіальні та конічні.

Лінійний градієнт (Linear Gradient)

Лінійний градієнт створює перехід вздовж прямої лінії від одного кольору до іншого. Лінійний градієнт задається за допомогою css-функції linear-gradient().

background: linear-gradient(direction, color-1, color-2, ...);

color-1, color-2, ...: Кольори, які треба включити в градієнт. Це може бути будь-яке кольорове значення, таке як ім'я кольору, шістнадцятковий код, RGB, RGBA тощо.

direction: Напрямок градієнта.

Напрямок можна задати ключовими словами: to top, to right, to bottom, to left та їх комбінаціями. В таких комбінаціях спочатку вказують вертикальне значення, а потім горизонтальне: to bottom right. Починатися градієнт буде з протилежного напрямку (в даному разі згори зліва). За замовчанням, якщо значення не вказане, то застосовується налаштування to bottom.

Також напрямок можна задати в градусах deg. Підрахунок починається з 0deg, що відповідає значенню to top. Обертання враховується за годинниковою стрілкою.

Колорстоп (color-stop)

За замовчанням перехід кольору відбувається плавно. Але градієнти можуть мати кольорові зупинки, що визначають, як кольори повинні переходити один в одного. Передається як другий параметр в описі кольору через пробіл. Може задаватися у відсотках, а також в пікселях.

background-image: linear-gradient(
  to right,
  red 5%,
  orange 50%,
  #00ff00 65%,
  #0000ff
);

Колір red займе від 0 до 5%

Колір orange займе від 5 до 50%

Колір #00ff00 займе від 50 до 65%

Колір #0000ff займе від 65 до 100%

Якщо колор-стопи задавати в пікселях і загальна довжина елемента буде більшою ніж сума колор-стопів, то градієнт по закінченню почнеться знову.

Суцільний градієнт

Суцільний градієнт (solid gradient) - це градієнт, який не має плавних переходів між кольоровими зупинками, а виглядає як звичайний блок одного кольору або півзвичайний блок з більш ніж одного кольору. якщо перерахувати так кілька кольорів, то можна створити смугасті заливки (так званий "матрас").

background: linear-gradient(
  to right,
  red 5%,
  orange 5%,
  orange 50%,
  #00ff00 50%,
  #00ff00 65%,
  #0000ff 65%,
  #0000ff
);

Для того, щоб зробити горизонтальний або похилий суцільний градієнт потрібно явно задати висоту блоку.

Радіальний градієнт

Радіальний градієнт (radial gradient) - це градієнт, який переходить від одного кольору до іншого вздовж радіуса, який поширюється від центру до країв або навпаки. Задається за допомогою css-функції radial-gradient(). Цей тип градієнта може бути використаний для створення відмінних від плавних переходів ефектів, таких як позначення центральних областей, світіння та інші графічні рішення.

background: radial-gradient(shape size position, color-1, color-2, ...);

shape: Форма градієнта, може бути circle (круговий) або ellipse (еліпс - за замовчуванням).

size: Розмір градієнта, може бути farthest-corner (найвіддаленіший кут), farthest-side (найвіддаленіший бік) або конкретний розмір в пікселях чи відсотках.

position: Позиція градієнта, може бути вказана у відсотках або пікселях, або ключові слова, які вказують положення (наприклад, center (за замовчуванням), top, left тощо). Перед ключовим словом треба додавати приставку at.

color-1, color-2, ...: Кольори градієнта та їх положення.

Кільцевий суцільний градієнт

Кільцевий суцільний градієнт можна створити за допомогою радіального градієнта, вказавши однаковий колір для всіх кольорових зупинок (колор-стопів) та вказавши circle або ellipse як форму градієнта.

Повторюваний градієнт

Повторюваний градієнт (repeating gradient) в CSS дозволяє створювати градієнти, які повторюються упродовж вказаної довжини або вказаної кількості разів. Повторювальний градієнт може бути як лінійний, так і радіальний. Створюються такі градієнти за допомогою css-функцій repeating-linear-gradient() та repeating-radial-gradient().

/* Повторюваний лінійний градієнт */
.repeating-linear-gradient {
  background: repeating-linear-gradient(direction, color-1, color-2, ..., color-N);
}

/* Повторюваний радіальний градієнт */
.repeating-radial-gradient {
  background: 
(shape size position, color-1, color-2, ..., color-N);
}

direction: Напрямок градієнта для repeating-linear-gradient (наприклад, to right, to bottom, 45deg тощо).

shape, size, position: Параметри градієнта для repeating-radial-gradient.

color-1, color-2, ..., color-N: Колоп-стопи та їх позиції в градієнті.

Розмір градієнта визначається останнім колор-стопом. Кількість кольорів може бути необмежена.

/* Приклад повторюваного лінійного градієнту */
background: repeating-linear-gradient(to top,   
  red 0px,
  red 5px,
  orange 5px,
  orange 20px,
  #00ff00 20px,
  #00ff00 40px,
  #0000ff 40px,
  #0000ff 50px) 

/* Приклад повторюваного радіального градієнту */
background: repeating-radial-gradient(circle at center,   
  red 0px,
  red 5px,
  orange 5px,
  orange 20px,
  #00ff00 20px,
  #00ff00 40px,
  #0000ff 40px,
  #0000ff 50px) 

Смугасті заголовки

Використовуючи повторювані градієнти можна робити цікаві барвисті оформлення заголовків.

Покликання:

Генератор градієнтів

Підбірка цікавих градієнтів

Конічні градієнти

Паттерни градієнтів для фонів