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

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

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

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

Композиция свойства

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

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

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

Синтаксис

/* Градиент в центре контейнера,
   переход от красного к синему и после к зеленому */
radial-gradient(circle at center, red 0, blue, green 100%)

Параметры

<position>
Позицию начала градиента можно рассматривать как background-position или transform-origin. По умолчанию позиция равна center.
<shape>
Форма градиента. Может принимать значение circle (подразумевается что формой является круг с постоянным радиусом) или ellipse (форма является эллипсом, выровненным по оси). По умолчанию имеет значение ellipse.
<extent-keyword>
Параметр определяющий размер конечной формы. Возможные значения:
Значение Описание
closest-side Конечная форма градиента соответствует стороне прямоугольника, ближайшей к его центру (для окружностей), или обеим вертикальным и горизонтальным сторонам, ближайшим к центру (для эллипсов).
closest-corner Конечная форма градиента определяется таким образом, чтобы он точно соответствовал ближайшему углу окна от его центра.
farthest-side Схоже с closest-side, кроме того что, размер формы определяется самой дальней стороной от своего центра (или вертикальных и горизонтальных сторон)
farthest-corner Конечная форма градиента определяется таким образом, чтобы он точно соответствовал самому дальнему углу прямоугольника от его центра.

Заметка: Ранние реализации этой функции включают в себя другие значения свойства (cover and contain) которые являются синонимами farthest-corner и closest-side, соответственно. Рекоментуется использовать только стандартные значения, так как некоторые реализации уже перестали использовать старые значения свойств.

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

Синтаксис

radial-gradient(
  [ [ circle || <length> ]                         [ at <position> ]? , |
    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |
    at <position> ,
  ]?
  <color-stop> [ , <color-stop> ]+
)
где <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
  и <color-stop>     = <color> [ <percentage> | <length> ]? 

Примеры

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

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

Заметка: Дополнительные примеры можно найти в Использование CSS градиентов.

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

Спецификация Статус Комментарии
CSS Images Module Level 3
Определение 'radial-gradients()' в этой спецификации.
Кандидат в рекомендации Initial definition.

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Свойство Firefox (Gecko) Chrome Internet Explorer Opera Safari
Стандартное использование (в background и background-image) 3.6 (1.9.2)-moz[1]
16 (16)
10.0 (534.16)-webkit[2] 10.0[3] 11.60-o 5.1-webkit[2]
Использование в border-image 29 (29) (Да) (Да) (Да) (Да)
Использование на любых других свойствах работающих с типом <image> Нет (Да) (Да) (Да) (Да)
Устаревший webkit синтаксис  Нет 3-webkit[2] Нет Нет 4.0-webkit[2]
at синтаксис (финальный стандартизованный вариант) 10 (10)-moz[1]
16 (16)[4]
26 10.0 11.60-o[2]
2.12
Нет
Interpolation hints/gradient midpoints (точки заданные в процентах без значения цвета) 36 (36) 40   27  
Свойство Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Стандартное спользование (в background и background-image) (Да) 1.0 (1.9.2)-moz[1]
16.0 (16)
10 (Да) (Да)
Использование в border-image (Да) 29.0 (29) (Да) (Да) (Да)
Использование на любых других свойствах работающих с типом <image> Нет (Да) (Да) (Да) (Да)
Устаревший webkit синтаксис  ? Нет ? ? ?
at синтаксис (финальный стандартизованный вариант) ? 10.0 (10)-moz[1]
16.0 (16)
10 ? ?

[1] Firefox 3.6 синтаксис - ранний реализованный вариант с префиксом. До Firefox 36, Gecko не применял градиенты на расширенное цветовое пространство, так как это приводило к неожиданному появлению серого оттенка при использовании прозрачности. Начиная с Firefox 42, версии градиентов с префиксом могую быть отключены установкой layout.css.prefixes.gradients to false.

[2] Ранний синтаксис Webkit с префиксом. WebKit с версии 528 поддерживает устаревшый вариант -webkit-gradient(radial,…). Смотрите также текущую поддержку радиальных градиентов.

[3] Internet Explorer от 5.5 до 9.0 поддерживают собственный фильтр filter: progid:DXImageTransform.Microsoft.Gradient().

[4] В дополнении к поддержке без префикса, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) добавил поддержку версии с префиксом -webkit по соображениям обратной совместимости с настройкой layout.css.prefixes.webkit, установленной по умолчанию как false. Начиная с Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) используется установка по умолчанию как true.

Сноски к Quantum CSS

  • Gecko имеет долгоиграющий баг благодаря которому значения вроде radial-gradient(circle gold,red) будут работать, даже несмотря на то, что пропущена запятая между circle и gold (баг 1383323). Новый parallel CSS движок от Firefox (также известный как Quantum CSS или Stylo, планируемый к релизув Firefox 57) исправляет этот баг.
  • Также в Gecko выражения с calc считаются недействительными — значени не валидно при использовании в  radial-gradient() (баг 1376019). Новый parallel CSS движок от Firefox (также известный как Quantum CSS или Stylo, планируемый к релизув Firefox 57) исправляет этот баг.

Смотрите так же

Метки документа и участники

Внесли вклад в эту страницу: SerzN1
Обновлялась последний раз: SerzN1,