Функция CSS `repeating-conic-gradient()`

repeating-conic-gradient() — CSS-функция, создающая изображение из повторяющегося градиента (в отличие от одиночного градиента) с переходами между цветами, вращающимися вокруг центральной точки (в отличие от переходов, расходящихся из центра).

Попробуйте

background: repeating-conic-gradient(red 0%, yellow 15%, red 33%);

background: repeating-conic-gradient(
  from 45deg at 10% 50%,
  brown 0deg 10deg,
  darkgoldenrod 10deg 20deg,
  chocolate 20deg 30deg
);

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

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

Синтаксис

/* Starburst: a blue on blue starburst: the gradient
   is a starburst of lighter and darker blue,
   centered in the upper left quadrant,
   offset by 3degrees so there is no up/down straight line */
repeating-conic-gradient(
  from 3deg at 25% 25%,
  hsl(200 100% 50%) 0deg 15deg,
  hsl(200 100% 60%) 10deg 30deg
)

/* Interpolation in polar color space
  with shorter hue interpolation method */
repeating-conic-gradient(in hsl shorter hue, red, blue 90deg, green 180deg)

Значения

<angle>

Значение угла, которому предшествует ключевое слово from; задаёт поворот градиента по часовой стрелке.

<position>

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

<angular-color-stop>

Значение color для цветовой точки, за которым следуют одна или две необязательные позиции точки (значения <angle> вдоль оси окружности градиента). Разница между углами последней и первой цветовых точек определяет размер повторяющегося градиента.

<color-hint>

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

Описание

Примеры повторяющихся конических градиентов — лучи звезды. Результатом работы функции repeating-conic-gradient() является объект типа данных <gradient>, который представляет собой особый вид <image>.

Если ни первая, ни последняя цветовые точки не содержат угол цветовой точки, больший 0deg или меньший 360 градусов соответственно, конический градиент не будет повторяться.

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

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

Как устроены повторяющиеся конические градиенты

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

В приведённых выше градиентах задано по одной трети синего, красного и жёлтого цветов.

repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);

repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%);

conic-gradient(red 120deg, yellow 120deg 240deg, blue 240deg);

radial-gradient(red 33%, yellow 33% 66%, blue 66%);

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

Как и в неповторяющемся коническом градиенте, цветовые точки располагаются вдоль дуги градиента — по окружности, а не на линии градиента, выходящей из его центра. Цвета переходят друг в друга так, словно вращаются вокруг центра окружности: если значение from <angle> не задано, переход начинается сверху и идёт по часовой стрелке на угол, равный разнице между наибольшим и наименьшим углами цветовых точек, после чего повторяется.

Повторяющийся конический градиент задаётся указанием угла поворота, центра градиента, а затем списка цветовых точек. Как и в неповторяющихся конических градиентах, для цветовых точек повторяющегося конического градиента указывается <angle>. Для градусов используются единицы deg, для градианов — grad, для радиан — rad, а для оборотов — turn. Полный круг составляет 360 градусов, 400 градианов, 2π радиан или 1 оборот. Браузеры, поддерживающие повторяющиеся конические градиенты, также принимают значения в процентах, где 100% соответствует 360 градусам, хотя в спецификации это не предусмотрено.

Синтаксис радиального и конического градиентов позволяет размещать его центр в любом месте внутри изображения или даже за его пределами. Значения положения похожи на синтаксис свойства background-position с двумя значениями.

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

Настройка градиентов

Добавляя на дугу градиента дополнительные угловые цветовые точки, можно создавать сложные переходы между несколькими цветами. Положение цветовой точки можно задать явно с помощью <angle>. Если положение цветовой точки не указано, она размещается посередине между предшествующей и следующей точками. Как и в неповторяющемся аналоге градиента, если угол первой или последней цветовой точки не задан, используются значения 0deg и 360deg. Если не указать угол ни для одной из них, получится неповторяющийся конический градиент. Если задать для первой или последней точки значение, отличное соответственно от 0 или 360 градусов, градиент будет повторяться на основе этого значения. Например, если не задать угол для первого цвета, а для последней цветовой точки указать 10%, дуга повторится 10 раз. Иными словами, начальной точкой становится первая заданная цветовая точка, а последней — последняя заданная цветовая точка с указанным углом. Следующие два градиента эквивалентны:

repeating-conic-gradient(red, orange, yellow, green, blue 50%);
repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg)

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

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

Можно сочетать разные единицы измерения угла, но не стоит этого делать: так CSS сложнее читать.

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

<repeating-conic-gradient()> = 
  repeating-conic-gradient( [ <conic-gradient-syntax> ] )

<conic-gradient-syntax> = 
  [ [ [ from [ <angle> | <zero> ] ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list>

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

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

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

<angular-color-stop> = 
  <color> <color-stop-angle>?

<angular-color-hint> = 
  <angle-percentage> |
  <zero>

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

<color-stop-angle> = 
  [ <angle-percentage> | <zero> ]{1,2}

<angle-percentage> = 
  <angle> |
  <percentage>

<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

Доступность

Браузеры не предоставляют вспомогательным технологиям специальную информацию о фоновых изображениях. Это особенно важно для программ чтения с экрана: они не сообщают о наличии таких изображений и, следовательно, не передают пользователям содержащуюся в них информацию. Хотя с помощью конических градиентов можно создавать круговые диаграммы, шахматные узоры и другие эффекты, у изображений CSS нет встроенного способа задать альтернативный текст. Поэтому изображение, созданное коническим градиентом, недоступно пользователям программ чтения с экрана. Если изображение содержит информацию, важную для понимания общего назначения страницы, лучше описать её в документе семантическим способом.

• Понимание WCAG на MDN: пояснения к рекомендации 1.1

• [Понимание критерия успеха 1.1.1

  W3C: Понимание WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html)

Примеры

Чёрно-белые лучи звезды

div {
  width: 200px;
  height: 200px;
}

<div></div>

div {
  background-image: repeating-conic-gradient(white 0 9deg, black 9deg 18deg);
}

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

Этот градиент повторяется 18 раз, но, поскольку видна только его правая половина, мы видим лишь 9 повторений.

div {
  width: 200px;
  height: 200px;
}

<div></div>

div {
  background: repeating-conic-gradient(
    from 3deg at 25% 25%,
    green,
    blue 2deg 5deg,
    green,
    yellow 15deg 18deg,
    green 20deg
  );
}

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

<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: repeating-conic-gradient(
    in hsl shorter hue,
    red,
    blue 180deg
  );
}

.longer {
  background-image: repeating-conic-gradient(
    in hsl longer hue,
    red,
    blue 180deg
  );
}

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

Другие примеры repeating-conic-gradient

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

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

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

См. также

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