conic-gradient()

<angle>

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

<position>

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

<angular-color-stop>

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

<color-hint>

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

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

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

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

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

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

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

Дуга градиента — это окружность градиента. Начальная точка градиента или дуги — север, или 12:00. Затем градиент поворачивается на угол from. Цвета градиента определяются углами цветовых остановок, их начальными и конечными точками, а также промежуточными и необязательными углами цветовых остановок. Переходы между цветами могут быть изменены с помощью подсказок цвета между смежными цветами цветовых остановок.

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

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

conic-gradient(red, orange, yellow, green, blue);
conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);

По умолчанию цвета плавно переходят от цвета одной цветовой остановки к цвету последующей цветовой остановки, а точка посередине между цветами является промежуточной точкой между цветовым переходом. Вы можете перенести эту середину цветового перехода в любую точку между двумя цветовыми остановками, добавив подсказку цвета, указывающую, где должна находиться середина цветового перехода. Следующее — это твёрдый красный цвет с начала до 10%-ной отметки, переход от красного к синему на 80% оборота, и последние 10% — твёрдый синий. Однако точка посередине перехода от красного к синему находится на 20%-ной отметке, а не на 50%-ной отметке, как это произошло бы без подсказки цвета 80 градиантов или 20%.

conic-gradient(red 40grad, 80grad, blue 360grad);

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

conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn);
conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn);

Цветовые остановки должны быть упорядочены по возрастанию. Последующие цветовые остановки с меньшим значением перепишут значение предыдущей цветовой остановки, создавая жёсткий переход. Следующие изменения происходят от красного к жёлтому на 30%-ной отметке, а затем переход от жёлтого к синему на 35% градиента:

conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);

Существуют и другие эффекты, которые можно создать с помощью конических градиентов. Любопытно, что одна из них — шахматная доска. Создавая квадранты с белым квадрантом в верхнем левом и нижнем правом углах и чёрными квадрантами в нижнем левом и верхнем правом углах, а затем повторяя градиент 16 раз (четыре раза по горизонтали и четыре раза по вертикали), можно создать шахматную доску.

conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad);
background-size: 25% 25%;

И, да, вы можете смешивать и сопоставлять различные единицы измерения углов, но не делайте этого. Вышеизложенное трудно читать.

<conic-gradient()> = 
  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

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

div {
  background: conic-gradient(red 36deg, orange 36deg 170deg, yellow 170deg);
  border-radius: 50%;
}

В этом примере для интерполяции используется цветовая система Цветовая модель HSL, и интерполируется оттенок.

.shorter {
  background-image: conic-gradient(in hsl shorter hue, red, blue);
}

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

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

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

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