`conic-gradient()`

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

Время чтения: меньше 5 мин

Кратко

Скопировано

Функция conic-gradient используется для задания фона в виде конического градиента.

Пример

Скопировано

        
          
          .element {  background-image: conic-gradient(#3590eb, #ee82cf);}
          .element {
  background-image: conic-gradient(#3590eb, #ee82cf);
}

Открыть демо в новой вкладке

Как понять

Скопировано

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

Как пишется

Скопировано

Простейшая запись конического градиента с двумя цветами:

        
          
          .element {  background-image: conic-gradient(white, black);}
          .element {
  background-image: conic-gradient(white, black);
}

По умолчанию начало градиента (первый цвет в списке) будет проходить линией через центральную и верхнюю точки элемента (как стрелки круговых часов в 12:00) и далее цвета будут следовать по кругу по часовой стрелке.

Компактная запись white, black на самом деле состоит из нескольких умолчаний: начальный угол, положение центра и координаты цветов:

        
          
          .element {  background-image: conic-gradient(from 0turn at 50% 50%, white 0%, black 100%);}
          .element {
  background-image: conic-gradient(from 0turn at 50% 50%, white 0%, black 100%);
}

Начальный угол и положение центра

Скопировано

Угол начала следования цветов можно изменить, например поворот на четверть круга можно записать как from 0.25turn (повороты) или from 90deg (градусы) или from 1.57rad (радианы) или 100grad (грады). Также можно менять координаты центральной точки, вокруг которой рисуется градиент, например at 20% 70% или at center top.

Границы цветов

Скопировано

Можно указывать любое количество цветов в любом доступном формате. Если цвета просто перечислять через запятую, то они равномерно распределятся по кругу, плавно переходя один в другой. Можно задать свои границы расположения цветов с помощью тех же единиц измерения, что и для задания начального угла градиента, плюс ещё используется значение в процентах. Например, в conic-gradient(white, grey 25%, black) середина серого цвета будет на 25%.

Ещё одной возможностью является указание средней точки, в которой будут перемешиваться два соседних цвета (средняя точка перехода). Например, в conic-gradient(white, black) цвета смешаются посередине, на 0.5turn, а при conic-gradient(white, 0.25turn, black) середина смешения цветов наступит на первой четверти круга.

Для создания жёстких переходов, без плавного градиента, можно для каждого цвета задать по две точки (границы их начала и конца), а следующий цвет должен начинаться с той же точки, на которой остановился предыдущий. Например conic-gradient(#fff 25%, #bbb 25% 50%, #666 50% 75%, #000 75%).

Открыть демо в новой вкладке

        
          
          .element-2 {  background-image: conic-gradient(    from 45deg at 25% center,    white,    #d6f78a 25%,    0.45turn,    rgb(127, 235, 235)    210deg 5.9rad,    hsl(278, 81%, 79%)    361grad  );}
          .element-2 {
  background-image: conic-gradient(
    from 45deg at 25% center,
    white,
    #d6f78a 25%,
    0.45turn,
    rgb(127, 235, 235)
    210deg 5.9rad,
    hsl(278, 81%, 79%)
    361grad
  );
}

Подсказки

Скопировано

Для более простого создания повторяющихся конических градиентов существует функция repeating-conic-gradient().

Поддержка в браузерах:

Chrome 69, поддерживается
Edge 79, поддерживается
Firefox 83, поддерживается
Safari 12.1, поддерживается

О Baseline

На практике

Скопировано

Олег Миторун советует

Скопировано

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

Открыть демо в новой вкладке

        
          
          .color-circle {  background: conic-gradient(    red,    orange,    yellow,    green,    blue,    purple,    red  );}
          .color-circle {
  background: conic-gradient(
    red,
    orange,
    yellow,
    green,
    blue,
    purple,
    red
  );
}

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

Открыть демо в новой вкладке

        
          
          .pie-chart {  background-image: conic-gradient(    coral 27deg,    palegreen 27deg 150deg,    skyblue 150deg  );}
          .pie-chart {
  background-image: conic-gradient(
    coral 27deg,
    palegreen 27deg 150deg,
    skyblue 150deg
  );
}

🛠 Простой фоновый рисунок в виде пирамидки сверху легко создать с помощью конического градиента:

Открыть демо в новой вкладке

        
          
          .pyramid {  background-image: conic-gradient(    from -0.125turn,    #bbb 0.25turn,    #999 0.25turn 0.5turn,    #bbb 0.5turn 0.75turn,    #eee 0.75turn  );}
          .pyramid {
  background-image: conic-gradient(
    from -0.125turn,
    #bbb 0.25turn,
    #999 0.25turn 0.5turn,
    #bbb 0.5turn 0.75turn,
    #eee 0.75turn
  );
}

🛠 В комбинации со свойством background-size можно создавать различные повторяющиеся паттерны, например сделать шахматную доску:

Открыть демо в новой вкладке

        
          
          .chess-board {  background-image: conic-gradient(    peru 25%,    cornsilk 25% 50%,    peru 50% 75%,    cornsilk 75%  );  background-size: 25% 25%;}
          .chess-board {
  background-image: conic-gradient(
    peru 25%,
    cornsilk 25% 50%,
    peru 50% 75%,
    cornsilk 75%
  );
  background-size: 25% 25%;
}

🛠 Этот рисунок солнца состоит из всего лишь одного элемента, к которому применены сразу и радиальный и конический градиенты:

Открыть демо в новой вкладке

        
          
          .sun {  background:    radial-gradient(      yellow 5%,      gold 31% 32%,      transparent 32.5% 50%,      lightskyblue 70%    ),    conic-gradient(      transparent 3%,      yellow 5% 8%,      transparent 10% 13%,      yellow 15% 17%,      transparent 20% 23%,      yellow 25% 28%,      transparent 30% 33%,      yellow 35% 38%,      transparent 40% 43%,      yellow 45% 48%,      transparent 50% 53%,      yellow 55% 58%,      transparent 60% 63%,      yellow 65% 68%,      transparent 70% 73%,      yellow 75% 78%,      transparent 80% 83%,      yellow 85% 88%,      transparent 90% 93%,      yellow 95% 98%,      transparent    );}
          .sun {
  background:
    radial-gradient(
      yellow 5%,
      gold 31% 32%,
      transparent 32.5% 50%,
      lightskyblue 70%
    ),
    conic-gradient(
      transparent 3%,
      yellow 5% 8%,
      transparent 10% 13%,
      yellow 15% 17%,
      transparent 20% 23%,
      yellow 25% 28%,
      transparent 30% 33%,
      yellow 35% 38%,
      transparent 40% 43%,
      yellow 45% 48%,
      transparent 50% 53%,
      yellow 55% 58%,
      transparent 60% 63%,
      yellow 65% 68%,
      transparent 70% 73%,
      yellow 75% 78%,
      transparent 80% 83%,
      yellow 85% 88%,
      transparent 90% 93%,
      yellow 95% 98%,
      transparent
    );
}

Код можно сделать ещё проще, заменив конический градиент на repeating-conic-gradient:

        
          
          .sun {  background:    radial-gradient(      yellow 5%,      gold 31% 32%,      transparent 32.5% 50%,      lightskyblue 70%    ),    repeating-conic-gradient(      yellow 0% 1%,      transparent 4% 6%,      yellow 9% 10%    );}
          .sun {
  background:
    radial-gradient(
      yellow 5%,
      gold 31% 32%,
      transparent 32.5% 50%,
      lightskyblue 70%
    ),
    repeating-conic-gradient(
      yellow 0% 1%,
      transparent 4% 6%,
      yellow 9% 10%
    );
}

Кратко

Пример

Как понять

Как пишется

Начальный угол и положение центра

Границы цветов

Подсказки

На практике

Олег Миторун советует

Читайте также

background-image

linear-gradient()

repeating-conic-gradient()

`background-image`

`linear-gradient()`

`repeating-conic-gradient()`