<gradient>

Тип даних CSS <gradient> – це особливий різновид <image>, що складається з поступового переходу між двома або більше кольорами.

Спробуйте його в дії

Градієнт CSS не має власних розмірів; отже, він не має природного чи бажаного розміру, як не має і бажаного співвідношення сторін. Його конкретний розмір відповідає розмірам елемента, до якого він застосовується.

Синтаксис

Тип даних <gradient> визначається одним з функційних типів, перелічених нижче.

Лінійний градієнт

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

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

Радіальні градієнти поступово змінюють колір від центральної точки (джерела). Вони породжуються функцією radial-gradient().

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

Конічні градієнти поступово змінюють колір по колу. Вони породжуються функцією conic-gradient().

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

Повторювальні градієнти дублюють градієнт стільки разів, скільки потрібно, щоб заповнити задану область. Вони породжуються функціями repeating-linear-gradient(), repeating-radial-gradient() і repeating-conic-gradient().

Інтерполяція

Як і будь-яка інтерполяція за участі кольорів, градієнти обчислюються в кольоровому просторі з альфа-перемноженням. Це запобігає появі неочікуваних відтінків сірого, коли змінюються як колір, так і непрозорість. (Зверніть увагу, що старі браузери можуть не використовувати цю логіку при застосуванні ключового слова transparent.)

Формальний синтаксис

Приклади

Приклад лінійного градієнта

Простий лінійний градієнт.

<div class="linear-gradient">Лінійний градієнт</div>

div {
  width: 240px;
  height: 80px;
}

.linear-gradient {
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}

Приклад радіального градієнта

Простий радіальний градієнт.

<div class="radial-gradient">Радіальний градієнт</div>

div {
  width: 240px;
  height: 80px;
}

.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30 144 255));
}

Приклад конічного градієнта

Приклад простого конічного градієнта. Зверніть увагу на те, що він поки що не має широкої браузерної підтримки.

<div class="conic-gradient">Конічний градієнт</div>

div {
  width: 200px;
  height: 200px;
}

.conic-gradient {
  background: conic-gradient(pink, coral, lime);
}

Приклади повторювальних градієнтів

Приклади простих повторювальних лінійного та радіального градієнтів.

<div class="linear-repeat"></div>
<span>Повторювальний лінійний градієнт</span>
<hr />
<div class="radial-repeat"></div>
<span>Повторювальний радіальний градієнт</span>
<hr />
<div class="conic-repeat"></div>
<span>Повторювальний конічний градієнт</span>

div {
  display: inline-block;
  width: 240px;
  height: 80px;
}

span {
  font-weight: bold;
  vertical-align: top;
}

.linear-repeat {
  background: repeating-linear-gradient(
    to top left,
    pink,
    pink 5px,
    white 5px,
    white 10px
  );
}

.radial-repeat {
  background: repeating-radial-gradient(
    lime,
    lime 15px,
    white 15px,
    white 30px
  );
}

.conic-repeat {
  background: repeating-conic-gradient(lime, pink 30deg);
}

Специфікації

Сумісність із браузерами

Дивіться також

• Застосування Градієнтів CSS
• Функції градієнтів: linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient(), conic-gradient(), repeating-conic-gradient()
• Базові типи даних CSS
• Одиниці вимірювання та значення CSS
• Вступ у CSS – Значення та одиниці вимірювання