radial-gradient()

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

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

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

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

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

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

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

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

Синтаксис

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

Параметры

<position> (en-US)
Позицию начала градиента можно рассматривать как background-position или transform-origin (en-US). По умолчанию позиция равна 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.

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

BCD tables only load in the browser

Сноски к 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) исправляет этот баг.

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