Как создать конический градиент в CSS
Development | Комментировать запись
В 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: CSS