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

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

Попробуйте

background: conic-gradient(red, orange, yellow, green, blue);

background: conic-gradient(
  from 0.25turn at 50% 30%,
  #f69d3c,
  10deg,
  #3f87a6,
  350deg,
  #ebf8e1
);

background: conic-gradient(from 3.1416rad at 10% 50%, #e66465, #9198e5);

background: conic-gradient(
  red 6deg,
  orange 6deg 18deg,
  yellow 18deg 45deg,
  green 45deg 110deg,
  blue 110deg 200deg,
  purple 200deg
);

<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 */
conic-gradient(red)

/* A conic gradient rotated 45 degrees,
   starting blue and finishing red */
conic-gradient(from 45deg, blue, red)

/* A bluish purple box: the gradient goes from blue to red,
   but only the bottom right quadrant is visible, as the
   center of the conic gradient is at the top left corner */
conic-gradient(from 90deg at 0 0, blue, red)

/* Interpolation in polar color space
  with longer hue interpolation method */
conic-gradient(in hsl longer hue, red, blue, green, red)

Значения

<angle>

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

<position>

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

<angular-color-stop>

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

<color-hint>

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

Описание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

conic-gradient(white 0.09turn, #bbbbbb 0.09turn, #bbbbbb 0.27turn, #666666 0.27turn, #666666 0.54turn, black 0.54turn);
conic-gradient(white 0turn 0.09turn, #bbbbbb 0.09turn 0.27turn, #666666 0.27turn 0.54turn, black 0.54turn 1turn);

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

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

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

conic-gradient(white 90deg, black 0.25turn 0.5turn, white calc(pi * 1rad) calc(pi * 1.5rad), black 300grad);
background-size: 25% 25%;

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

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

<conic-gradient()> = 
  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-изображений нет встроенного способа задать альтернативный текст. Поэтому изображение, созданное коническим градиентом, будет недоступно пользователям программ чтения с экрана. Если изображение содержит информацию, важную для понимания общего назначения страницы, лучше описать её семантически в документе.

• MDN: разъяснения к руководству WCAG, пункт 1.1

• [Разъяснение критерия успешного соответствия 1.1.1

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

Примеры

Градиент под углом 40 градусов

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

<div></div>

div {
  background-image: conic-gradient(from 40deg, white, black);
}

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

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

<div></div>

div {
  background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);
}

Круговая диаграмма с градиентом

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

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

<div></div>

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

Шахматная доска

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

<div></div>

div {
  background: conic-gradient(
      white 0.25turn,
      black 0.25turn 0.5turn,
      white 0.5turn 0.75turn,
      black 0.75turn
    )
    top left / 25% 25% repeat;
  border: 1px solid;
}

Интерполяция с использованием тона

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

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

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

Цветовой круг

<div></div>

div {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

div {
  background-image: conic-gradient(
    in hsl longer hue,
    hsl(360 100% 50%),
    hsl(0 100% 50%)
  );
}

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

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