<gradient>

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

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

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

Синтаксис

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

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

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

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

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

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

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

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

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

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

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

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

Інформація про синтаксис недоступна

Жодного значення не знайшлося в базі даних.

Приклади

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

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

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

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

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

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

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

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

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

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

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

.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);
}

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

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

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
<gradient>
Chrome Full support 26
Edge Full support 12
prefix
Firefox Full support 3.6
footnote
Internet Explorer Full support 10
prefix
Opera Full support 12.1
Safari Full support 7
WebView Android Full support 37
Chrome Android Full support 26
Firefox for Android Full support 4
footnote
Opera Android Full support 12.1
Safari on iOS Full support 7
Samsung Internet Full support 1.5
conic-gradient() Chrome Full support 69
Edge Full support 79
Firefox Full support 83
Internet Explorer No support Ні
Opera Full support 56
Safari Full support 12.1
WebView Android Full support 69
Chrome Android Full support 69
Firefox for Android Full support 83
Opera Android Full support 48
Safari on iOS Full support 12.2
Samsung Internet Full support 10.0
Double-position color stops
Chrome Full support 72
Edge Full support 79
Firefox Full support 83
Internet Explorer No support Ні
Opera Full support 60
Safari Full support 12.1
WebView Android Full support 72
Chrome Android Full support 72
Firefox for Android Full support 83
Opera Android Full support 51
Safari on iOS Full support 12.2
Samsung Internet Full support 11.0
linear-gradient() Chrome Full support 26
Edge Full support 12
Firefox Full support 16
footnote
Internet Explorer Full support 10
footnote
Opera Full support 12.1
Safari Full support 7
WebView Android Full support 37
Chrome Android Full support 26
Firefox for Android Full support 16
footnote
Opera Android Full support 12.1
Safari on iOS Full support 7
Samsung Internet Full support 1.5
Double-position color stops
Chrome Full support 71
Edge Full support 79
Firefox Full support 64
Internet Explorer No support Ні
Opera Full support 58
Safari Full support 12.1
WebView Android Full support 71
Chrome Android Full support 71
Firefox for Android Full support 64
Opera Android Full support 50
Safari on iOS Full support 12.2
Samsung Internet Full support 10.0
Interpolation Hints / Gradient Midpoints
Chrome Full support 40
Edge Full support 79
Firefox Full support 36
Internet Explorer No support Ні
Opera Full support 27
Safari Full support 7
WebView Android Full support 40
Chrome Android Full support 40
Firefox for Android Full support 36
Opera Android Full support 27
Safari on iOS Full support 7
Samsung Internet Full support 4.0
to keyword
Chrome Full support 26
Edge Full support 12
Firefox Full support 10
Internet Explorer Full support 10
Opera Full support 12.1
Safari Full support 7
WebView Android Full support 37
Chrome Android Full support 26
Firefox for Android Full support 10
Opera Android Full support 14
Safari on iOS Full support 7
Samsung Internet Full support 1.5
Unitless 0 for <angle>
Chrome Full support 26
Edge Full support 12
Firefox Full support 55
Internet Explorer No support Ні
Opera Full support 16
Safari Full support 7
WebView Android Full support 37
Chrome Android Full support 26
Firefox for Android Full support 55
Opera Android Full support 14
Safari on iOS Full support 7
Samsung Internet Full support 1.5
radial-gradient() Chrome Full support 26
Edge Full support 12
Firefox Full support 16
footnote
Internet Explorer Full support 10
footnote
Opera Full support 12.1
Safari Full support 7
WebView Android Full support 37
Chrome Android Full support 26
Firefox for Android Full support 16
footnote
Opera Android Full support 12.1
Safari on iOS Full support 7
Samsung Internet Full support 1.5
at syntax
Chrome Full support 26
Edge Full support 12
Firefox Full support 16
footnote
Internet Explorer Full support 10
Opera Full support 15
Safari No support Ні
WebView Android Full support 37
Chrome Android Full support 26
Firefox for Android Full support 16
Opera Android Full support 14
Safari on iOS No support Ні
Samsung Internet Full support 1.5
Double-position color stops
Chrome Full support 71
Edge Full support 79
Firefox Full support 64
Internet Explorer No support Ні
Opera Full support 58
Safari Full support 12.1
WebView Android Full support 71
Chrome Android Full support 71
Firefox for Android Full support 64
Opera Android Full support 50
Safari on iOS Full support 12.2
Samsung Internet Full support 10.0
Interpolation Hints / Gradient Midpoints
Chrome Full support 40
Edge Full support 79
Firefox Full support 36
Internet Explorer No support Ні
Opera Full support 27
Safari Full support 7
WebView Android Full support 40
Chrome Android Full support 40
Firefox for Android Full support 36
Opera Android Full support 27
Safari on iOS Full support 7
Samsung Internet Full support 4.0
repeating-conic-gradient() Chrome Full support 69
Edge Full support 79
Firefox Full support 83
Internet Explorer No support Ні
Opera Full support 56
Safari Full support 12.1
WebView Android Full support 69
Chrome Android Full support 69
Firefox for Android Full support 83
Opera Android Full support 48
Safari on iOS Full support 12.2
Samsung Internet Full support 10.0
repeating-linear-gradient() Chrome Full support 26
Edge Full support 12
Firefox Full support 16
footnote
Internet Explorer Full support 10
footnote
Opera Full support 12.1
Safari Full support 7
WebView Android Full support 37
Chrome Android Full support 26
Firefox for Android Full support 16
footnote
Opera Android Full support 12.1
Safari on iOS Full support 7
Samsung Internet Full support 1.5
Double-position color stops
Chrome Full support 71
Edge Full support 79
Firefox Full support 64
Internet Explorer No support Ні
Opera Full support 58
Safari Full support 12.1
WebView Android Full support 71
Chrome Android Full support 71
Firefox for Android Full support 64
Opera Android Full support 50
Safari on iOS Full support 12.2
Samsung Internet Full support 10.0
Interpolation Hints / Gradient Midpoints
Chrome Full support 40
Edge Full support 79
Firefox Full support 36
Internet Explorer No support Ні
Opera Full support 27
Safari Full support 7
WebView Android Full support 40
Chrome Android Full support 40
Firefox for Android Full support 36
Opera Android Full support 27
Safari on iOS Full support 7
Samsung Internet Full support 4.0
to keyword
Chrome Full support 26
Edge Full support 12
Firefox Full support 10
Internet Explorer Full support 10
Opera Full support 12.1
Safari Full support 7
WebView Android Full support 37
Chrome Android Full support 26
Firefox for Android Full support 10
Opera Android Full support 14
Safari on iOS Full support 7
Samsung Internet Full support 1.5
Unitless 0 for <angle>
Chrome Full support 26
Edge Full support 12
Firefox Full support 55
Internet Explorer No support Ні
Opera Full support 16
Safari Full support 7
WebView Android Full support 37
Chrome Android Full support 26
Firefox for Android Full support 55
Opera Android Full support 14
Safari on iOS Full support 7
Samsung Internet Full support 1.5
repeating-radial-gradient() Chrome Full support 26
Edge Full support 12
Firefox Full support 16
footnote
Internet Explorer Full support 10
Opera Full support 12.1
Safari Full support 7
WebView Android Full support 4.4
Chrome Android Full support 26
Firefox for Android Full support 16
footnote
Opera Android Full support 12.1
Safari on iOS Full support 7
Samsung Internet Full support 1.5
at syntax
Chrome Full support 26
Edge Full support 12
Firefox Full support 16
footnote
Internet Explorer Full support 10
Opera Full support 15
Safari No support Ні
WebView Android Full support 37
Chrome Android Full support 26
Firefox for Android Full support 16
footnote
Opera Android Full support 14
Safari on iOS No support Ні
Samsung Internet Full support 1.5
Double-position color stops
Chrome Full support 71
Edge Full support 79
Firefox Full support 64
Internet Explorer No support Ні
Opera Full support 58
Safari Full support 12.1
WebView Android Full support 71
Chrome Android Full support 71
Firefox for Android Full support 64
Opera Android Full support 50
Safari on iOS Full support 12.2
Samsung Internet Full support 10.0
Interpolation Hints / Gradient Midpoints
Chrome Full support 40
Edge Full support 79
Firefox Full support 36
Internet Explorer No support Ні
Opera Full support 27
Safari Full support 7
WebView Android Full support 40
Chrome Android Full support 40
Firefox for Android Full support 46
Opera Android Full support 27
Safari on iOS Full support 7
Samsung Internet Full support 4.0

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