repeating-conic-gradient()

<angle>

Следуя ключевому слову from, и принимая угол в качестве значения, определяет вращение градиента по часовой стрелке.

<position>

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

<angular-color-stop>

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

<color-hint>

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

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

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

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

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

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

В приведенных выше градиентах 1/3 — синий, 1/3 — красный и 1/3 — жёлтый.

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%, либо 360 градусов, если не указано явно. При использовании этих значений по умолчанию повторяющаяся дуга составляет 360 градусов и, следовательно, не повторяется.

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

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

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

Дуга градиента является частью окружности градиента. 0 градусов — север, или 12:00.

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

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

Добавление дополнительных точек остановки цвета с углами на дуге градиента позволяет создавать сильно настраиваемые переходы между множеством цветов. Положение точки остановки цвета можно явно определить, используя <angle>. Если вы не указываете местоположение точки остановки цвета, оно размещается посередине между предшествующей и последующей точкой остановки. Как и в случае с не повторяющимся градиентом, если вы не указываете угол для первой или последней точки остановки цвета, значения будут 0 градусов и 360 градусов. Если вы не указываете ни для одной из них угол, вы получите не повторяющийся конический градиент. Если вы указываете не 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> ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list>  

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

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

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

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

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

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

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

• MDN Понимание WCAG, объяснения руководства 1.1
• Понимание критерия успеха 1.1.1 | W3C Понимание WCAG 2.0

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

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

В этом примере для интерполяции используется цветовая система 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
  );
}

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

Для получения дополнительных примеров обратитесь к разделу Использование 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()