Как создать конический градиент в CSS

В CSS уже можно довольно легко создавать линейные и радиальные градиенты. А теперь в спецификации появится третий тип градиента – конический. Конический градиент аналогичен радиальному, за исключением того, что стоп-цвета находятся на внешнем краю создаваемого круга.

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

Давайте взглянем на радиальный и конический градиент с одинаковыми стоп-цветами:

gradient {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
.radial {
  background: radial-gradient(#FAE042, #4AAE9B);
}
.conic {
  background: conic-gradient(#FAE042, #4AAE9B);
}

И вот их разметка.

<div class="gradient radial"></div>
<div class="gradient conic"></div>

Синтаксис и примеры

Конический градиент может содержать множество стоп-цветов:

.conic {
  background: conic-gradient(cyan, magenta, yellow, black);
}

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

.conic {
  background: conic-gradient(red 180deg, #4AAE9B);
}
.conic-2 {
  background: conic-gradient(red 180deg 90%, #4AAE9B);
}

Обратите внимание, как второе значение стоп-цвета определяет переход.

Жесткие переходы

Цвета могут иметь резкие границы, без плавных переходов:

.conic-4 {
  background: conic-gradient(cyan 25%, magenta 0 50%, yellow 0 75%, black 0);
}

Ключевые слова from и at

Указать начальный угол можно при помощи ключевого слова from:

.conic {
  background: conic-gradient(from 45deg, cyan, magenta, yellow);
}

Кроме того, вы можете использовать ключевое слово at, чтобы указать центр перехода:

.conic {
  background: conic-gradient(from 45deg at 65% 35%, cyan, magenta, yellow);
}

Примечание: К сожалению, в данный момент мы не можем показать этот пример, потому что на момент публикации этой статьи в полифилле была ошибка, из-за которой слетают все остальные примеры.

Плавные переходы

Для создания плавных переходов последний цветовой маркер должен быть таким же, как и первый:

conic {
  background: conic-gradient(cyan, magenta, yellow, cyan);
}

Повторяющийся конический градиент

Также в CSS есть функция repeating-conic-gradien, которую можно использовать для создания интересных узоров с коническими градиентами:

conic-repeating {
  background: repeating-conic-gradient(red 10%, #4AAE9B 20%);
}

Полифилл

По состоянию на 2020 год только 85% устройств во всем мире поддерживали свойство conic-gradient. К счастью, есть его аналоги, например, polyfill от @LeaVerou, который вы можете использовать в том случае, если свойство не поддержичается.

Чтобы использовать полифилл, просто добавьте скрипты для Prefix-free и сам полифилл градиента перед закрывающим тегом body.

<script src="/assets/polyfills/prefixfree.min.js"></script>
<script src="/assets/polyfills/conic-gradient.js"></script>
Tags:

Добавить комментарий