radial-gradient()

Базовая информация Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Функция radial-gradient() CSS функция создает изображение с плавным переходом между двумя или более цветами, исходящими от начала координат. Его форма может быть кругом или эллипсом. Результатом функции является объект типа <gradient>, который является особым видом <image>.

Попробовать

Синтаксис

/* A gradient at the center of its container,
   starting red, changing to blue, and finishing green */
radial-gradient(circle at center, red 0, blue, green 100%)

/* hsl color space with longer hue interpolation */
radial-gradient(circle at center in hsl longer hue, red 0, blue, green 100%)

Радиальный градиент определяется указанием центра градиента (где будет эллипс 0%) и размера и формы конечной формы (эллипса 100%).

Значения

<position>

Положение градиента, интерпретируемое так же, как в background-position или transform-origin. Если не указано, по умолчанию используется center.

<ending-shape>

Конечная форма градиента. Значение может быть circle (означающее, что форма градиента — круг с постоянным радиусом) или ellipse (означающее, что форма — выровненный по осям эллипс). Если не указано, по умолчанию используется ellipse.

<size>

Определяет размер конечной формы градиента. Если опущено, по умолчанию используется farthest-corner. Оно может быть указано явно или ключевым словом. Для целей определения ключевых слов считайте края градиентного блока бесконечно расширяющимися в обоих направлениях, а не конечными отрезками.

И круговые, и эллиптические градиенты принимают следующие ключевые слова для их <size>:

Ключевое слово	Описание
`closest-side`	Конечная форма градиента встречается с боковой стороной блока, ближайшей к его центру (для кругов) или встречается с обеими вертикальными и горизонтальными сторонами, ближайшими к центру (для эллипсов).
`closest-corner`	Конечная форма градиента имеет размер, чтобы точно встретиться с ближайшим углом блока от его центра.
`farthest-side`	Аналогично `closest-side`, за исключением того, что конечная форма имеет размер, чтобы встретиться со стороной блока, наиболее удалённой от его центра (или вертикальными и горизонтальными сторонами).
`farthest-corner`	Значение по умолчанию, конечная форма градиента имеет размер, чтобы точно встретиться с самым удалённым углом блока от его центра.

Если <ending-shape> указано как circle, размер может быть указан явно как <length>, что предоставляет явный радиус круга. Отрицательные значения недопустимы.

Если <ending-shape> указано как ellipse, размер может быть задан как <length-percentage> с двумя значениями, чтобы задать явный размер эллипса. Первое значение представляет горизонтальный радиус, а второе — вертикальный радиус. Процентные значения относятся к соответствующему размеру градиентного блока. Отрицательные значения недопустимы.

Когда ключевое слово <ending-shape> опущено, форма градиента определяется заданным размером. Одно <length> значение предоставляет круг, а два значения в <length-percentage> единицах предоставляет эллипс. Одно <percentage> значение неверно.

<linear-color-stop>

Значение <color> цвета остановки, за которым следуют одно или два необязательных положения остановки (либо <percentage>, либо <length> вдоль оси градиента). Процент от 0%, или длина 0, представляет центр градиента; значение 100% представляет пересечение конечной формы с виртуальным лучом градиента. Процентные значения между ними линейно расположены на луче градиента. Включение двух положений остановки эквивалентно объявлению двух остановок цвета с тем же цветом в двух позициях.

<color-hint>

Подсказка цвета — это подсказка интерполяции, определяющая, как градиент развивается между соседними остановками цвета. Длина определяет, в какой точке между двумя остановками цвета цвет градиента должен достигать середины цветового перехода. Если опущено, середина цветового перехода — середина между двумя остановками цвета.

Описание

Как и любой градиент, радиальный градиент имеет нет собственных размеров; т. е. у него нет естественного или предпочтительного размера, ни предпочтительного соотношения сторон. Его фактический размер будет соответствовать размеру элемента, к которому он применяется.

Чтобы создать радиальный градиент, который повторяется, заполняя свой контейнер, используйте функцию repeating-radial-gradient() вместо этого.

Поскольку <gradient> относятся к типу данных <image>, они могут использоваться только там, где могут использоваться <image>. По этой причине radial-gradient() не будет работать с background-color и другими свойствами, использующими тип данных <color>.

Состав радиального градиента

Graph explaining radial gradients: the virtual radiant ray is horizontal starting from the midpoint. The elliptical gradient, and therefore the ending shape, has the same aspect ratio as the box upon which it is declared.

Радиальный градиент определяется точкой центра, конечной формой и двумя или более точками остановок цвета.

Для создания плавного градиента функция radial-gradient() рисует ряд концентрических фигур, расходящихся от центра к конечной форме (и потенциально за её пределами). Конечная форма может быть либо кругом, либо эллипсом.

Точки остановок цвета размещаются на виртуальном луче градиента, который простирается горизонтально от центра вправо. Позиции остановок цвета, заданные в процентах, относятся к пересечению конечной формы с этим лучом градиента, что представляет 100%. Каждая фигура имеет один цвет, определяемый цветом на луче градиента, с которым она пересекается.

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

<radial-gradient()> = 
  radial-gradient( [ <radial-gradient-syntax> ] )  

<radial-gradient-syntax> = 
  [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>  

<radial-shape> = 
  circle   |
  ellipse  

<radial-size> = 
  <radial-extent>               |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?  

<radial-extent> = 
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side    

<length-percentage> = 
  <length>      |
  <percentage>  

<linear-color-stop> = 
  <color> <length-percentage>?  

<linear-color-hint> = 
  <length-percentage>

Примеры

Простой градиент

.radial-gradient {
  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
}

Градиент, не центрированный

.radial-gradient {
  background-image: radial-gradient(
    farthest-corner at 40px 40px,
    #f35 0%,
    #43e 100%
  );
}

Интерполяция с оттенком

В этом примере для интерполяции используется цветовая система HSL, и интерполируется оттенок.

.shorter {
  background-image: radial-gradient(
    circle at center in hsl shorter hue,
    red,
    blue
  );
}

.longer {
  background-image: radial-gradient(
    circle at center in hsl longer hue,
    red,
    blue
  );
}

Блок слева использует более короткую интерполяцию, что означает, что цвет переходит напрямую от красного к синему, используя более короткую дугу на цветовом круге. Блок справа использует более длинную интерполяцию, что означает, что цвет переходит от красного к синему, проходя через зелёный, жёлтый и оранжевый.

Ещё примеры радиальных градиентов

Дополнительные примеры см. в разделе Использование CSS-градиентов.

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

Спецификация
CSS Images Module Level 3 # radial-gradients

Совместимость с браузерами

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`radial-gradient`	2613	12	1649 3.6 С Firefox 42, префиксную версию градиентов можно отключить, установив `layout.css.prefixes.gradients` на `false`.	12.11511.6–15	7 5.1 Safari 4 поддерживал экспериментальную функцию `-webkit-gradient(radial,…)`. Эта устаревшая синтаксис всё ещё поддерживается для совместимости.	2618	1649 4 С Firefox 42, префиксную версию градиентов можно отключить, установив `layout.css.prefixes.gradients` на `false`.	12.11412–14	7 5 Safari 4 поддерживал экспериментальную функцию `-webkit-gradient(radial,…)`. Эта устаревшая синтаксис всё ещё поддерживается для совместимости.	1.51.0	≤37≤37
`at`	26	12	10	11.6	7	26	10	12	7	1.5	4.4
`doubleposition`	71	79	64	58	12.1	71	64	50	12.2	10.0	71
`hue_interpolation_method`	111	111	127121	97	16.2	111	127	75	16.2	22.0	111
`interpolation_color_space`	111	111	127121	97	16.2	111	127	75	16.2	22.0	111
`interpolation_hints`	40	79	36	27	7	40	36	27	7	4.0	40
`premultiplied_gradients`	29	79	36	16	15	29	36	16	15	2.0	4.4

См. также

Использование CSS градиентов
Другие функции градиентов: repeating-radial-gradient(), linear-gradient(), repeating-linear-gradient(), conic-gradient(), repeating-conic-gradient()
<hue-interpolation-method>
<color-interpolation-method>
<image>
image()
element()
image-set()
cross-fade()

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient