CSS-функция `radial-gradient()`

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

Попробуйте

background: radial-gradient(#e66465, #9198e5);

background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);

background: radial-gradient(
  circle at 100%,
  #333333,
  #333333 50%,
  #eeeeee 75%,
  #333333 75%
);

background:
  radial-gradient(ellipse at top, #e66465, transparent),
  radial-gradient(ellipse at bottom, #4d9f0c, transparent);

<section class="display-block" id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  min-height: 100%;
}

Синтаксис

/* A gradient with a single color of red */
radial-gradient(red)

/* 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>s относятся к типу данных <image>, их можно использовать только там, где допустимы <image>s. Поэтому radial-gradient() не будет работать со свойством background-color и другими свойствами, использующими тип данных color.

Структура радиального градиента

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

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

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

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

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

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

<radial-shape> = 
  circle |
  ellipse

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

<position> = 
  [ [ 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-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]

<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>

<rectangular-color-space> = 
  srgb |
  srgb-linear |
  display-p3 |
  display-p3-linear |
  a98-rgb |
  prophoto-rgb |
  rec2020 |
  lab |
  oklab |
  xyz |
  xyz-d50 |
  xyz-d65

<polar-color-space> = 
  hsl |
  hwb |
  lch |
  oklch

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue

<custom-color-space> = 
  <dashed-ident>

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

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

<color> = 
  <color-base> |
  currentColor |
  <system-color> |
  <light-dark()> |
  <deprecated-system-color>

<color-stop-length> = 
  <length-percentage>{1,2}

<color-base> = 
  <hex-color> |
  <color-function> |
  <named-color> |
  <color-mix()> |
  transparent

<system-color> = 
  AccentColor |
  AccentColorText |
  ActiveText |
  ButtonBorder |
  ButtonFace |
  ButtonText |
  Canvas |
  CanvasText |
  Field |
  FieldText |
  GrayText |
  Highlight |
  HighlightText |
  LinkText |
  Mark |
  MarkText |
  SelectedItem |
  SelectedItemText |
  VisitedText

<light-dark()> = 
  light-dark( <color>, <color> )

<deprecated-system-color> = 
  ActiveBorder |
  ActiveCaption |
  AppWorkspace |
  Background |
  ButtonHighlight |
  ButtonShadow |
  CaptionText |
  InactiveBorder |
  InactiveCaption |
  InactiveCaptionText |
  InfoBackground |
  InfoText |
  Menu |
  MenuText |
  Scrollbar |
  ThreeDDarkShadow |
  ThreeDFace |
  ThreeDHighlight |
  ThreeDLightShadow |
  ThreeDShadow |
  Window |
  WindowFrame |
  WindowText

<color-function> = 
  <rgb()> |
  <rgba()> |
  <hsl()> |
  <hsla()> |
  <hwb()> |
  <lab()> |
  <lch()> |
  <oklab()> |
  <oklch()> |
  <color()>

<named-color> = 
  aliceblue |
  antiquewhite |
  aqua |
  aquamarine |
  azure |
  beige |
  bisque |
  black |
  blanchedalmond |
  blue |
  blueviolet |
  brown |
  burlywood |
  cadetblue |
  chartreuse |
  chocolate |
  coral |
  cornflowerblue |
  cornsilk |
  crimson |
  cyan |
  darkblue |
  darkcyan |
  darkgoldenrod |
  darkgray |
  darkgreen |
  darkgrey |
  darkkhaki |
  darkmagenta |
  darkolivegreen |
  darkorange |
  darkorchid |
  darkred |
  darksalmon |
  darkseagreen |
  darkslateblue |
  darkslategray |
  darkslategrey |
  darkturquoise |
  darkviolet |
  deeppink |
  deepskyblue |
  dimgray |
  dimgrey |
  dodgerblue |
  firebrick |
  floralwhite |
  forestgreen |
  fuchsia |
  gainsboro |
  ghostwhite |
  gold |
  goldenrod |
  gray |
  green |
  greenyellow |
  grey |
  honeydew |
  hotpink |
  indianred |
  indigo |
  ivory |
  khaki |
  lavender |
  lavenderblush |
  lawngreen |
  lemonchiffon |
  lightblue |
  lightcoral |
  lightcyan |
  lightgoldenrodyellow |
  lightgray |
  lightgreen |
  lightgrey |
  lightpink |
  lightsalmon |
  lightseagreen |
  lightskyblue |
  lightslategray |
  lightslategrey |
  lightsteelblue |
  lightyellow |
  lime |
  limegreen |
  linen |
  magenta |
  maroon |
  mediumaquamarine |
  mediumblue |
  mediumorchid |
  mediumpurple |
  mediumseagreen |
  mediumslateblue |
  mediumspringgreen |
  mediumturquoise |
  mediumvioletred |
  midnightblue |
  mintcream |
  mistyrose |
  moccasin |
  navajowhite |
  navy |
  oldlace |
  olive |
  olivedrab |
  orange |
  orangered |
  orchid |
  palegoldenrod |
  palegreen |
  paleturquoise |
  palevioletred |
  papayawhip |
  peachpuff |
  peru |
  pink |
  plum |
  powderblue |
  purple |
  rebeccapurple |
  red |
  rosybrown |
  royalblue |
  saddlebrown |
  salmon |
  sandybrown |
  seagreen |
  seashell |
  sienna |
  silver |
  skyblue |
  slateblue |
  slategray |
  slategrey |
  snow |
  springgreen |
  steelblue |
  tan |
  teal |
  thistle |
  tomato |
  turquoise |
  violet |
  wheat |
  white |
  whitesmoke |
  yellow |
  yellowgreen

<color-mix()> = 
  color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2})

<rgb()> = 
  rgb( <percentage>#{3} , <alpha-value>? ) |
  rgb( <number>#{3} , <alpha-value>? ) |
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<rgba()> = 
  rgba( <percentage>#{3} , <alpha-value>? ) |
  rgba( <number>#{3} , <alpha-value>? ) |
  rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<hsl()> = 
  hsl( <hue>, <percentage>, <percentage>, <alpha-value>? ) |
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hsla()> = 
  hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ) |
  hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<lab()> = 
  lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )

<lch()> = 
  lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

<oklab()> = 
  oklab( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )

<oklch()> = 
  oklch( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

<color()> = 
  color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )

<alpha-value> = 
  <number> |
  <percentage>

<hue> = 
  <number> |
  <angle>

<colorspace-params> = 
  [<custom-params> | <predefined-rgb-params> | <xyz-params>]

<custom-params> = 
  <dashed-ident> [ <number> | <percentage> | none ]+

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}

<xyz-params> = 
  <xyz> [ <number> | <percentage> | none ]{3}

<predefined-rgb> = 
  srgb |
  srgb-linear |
  display-p3 |
  display-p3-linear |
  a98-rgb |
  prophoto-rgb |
  rec2020

<xyz> = 
  xyz |
  xyz-d50 |
  xyz-d65

Примеры

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

<div class="radial-gradient"></div>

.radial-gradient {
  width: 240px;
  height: 120px;
}

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

Градиент со смещённым центром

<div class="radial-gradient"></div>

.radial-gradient {
  width: 240px;
  height: 120px;
}

.radial-gradient {
  background-image: radial-gradient(
    farthest-corner at 40px 40px,
    #ff3355 0%,
    #4433ee 100%
  );
}

Интерполяция по цветовому тону

<div class="shorter"></div>
<div class="longer"></div>

div {
  display: inline-block;
  margin-top: 1rem;
  width: 45vw;
  height: 80vh;
}

.shorter::before {
  content: "shorter hue";
  display: block;
  margin-top: -1rem;
}

.longer::before {
  content: "longer hue";
  display: block;
  margin-top: -1rem;
}

В этом примере интерполяции используется цветовая модель 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
• Другие функции градиентов: 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()