Содержание
Коротко
В выпуске №752 профильной рассылки о фронтенд-разработке напомнили о выразительной, но не всегда первой приходящей в голову функции CSS — conic-gradient(). Она распределяет цвета не вдоль линии и не от центра к краям, а по кругу вокруг заданной точки.
За счёт этого одним фоном можно собрать сектор круговой диаграммы, веер лучей, шахматный узор или треугольник. Часто для такого результата раньше требовались дополнительный элемент, SVG либо изображение.
Что произошло
Подборка ссылается на разбор Криса Койера о том, как конические градиенты помогают рисовать треугольники. Основная идея проста: у градиента есть угловые границы цвета, а резкий переход между ними образует нужную форму.
Функция принимает список цветов и их границ; необязательный параметр from поворачивает рисунок, а at переносит его центр. Плавные переходы дают цветовой круг, а одинаковые точки остановки превращают градиент в чёткие сектора.
.badge {
background: conic-gradient(
from 45deg at 50% 50%,
#22d3ee 0 90deg,
#0f766e 90deg 180deg,
transparent 180deg 360deg
);
}
Такой фон не добавляет в документ отдельные узлы. Он остаётся обычным CSS-свойством, которое можно сочетать с border-radius, clip-path, масками и псевдоэлементами.
Почему это важно
Линейный градиент удобен для полос и освещения, радиальный — для свечения и круглых пятен. conic-gradient() решает другую геометрическую задачу: делит пространство по углу. Поэтому он естественно подходит для долей, циферблатов, указателей направления и декоративных повторяющихся узоров.
Это не означает, что им следует заменять SVG в каждой иконке. SVG лучше, когда важны точные контуры, доступное текстовое описание или сложная интерактивная графика. Зато для локального фона конический градиент уменьшает объём разметки и позволяет менять цвета, размер и поворот через CSS-переменные.
Особенно полезно, что угол можно анимировать. Например, индикатор выполнения меняет границу сектора, а наведение плавно поворачивает веер. При этом стоит проверить движение на устройстве и предусмотреть вариант для пользователей с prefers-reduced-motion.
На практике
- Для круговой диаграммы задавайте твёрдые угловые границы:
conic-gradient(#22d3ee 0 40%, #155e75 40% 100%). Цвета покажут доли без рисования дуг. - Для треугольника используйте непрозрачный цвет только в одном секторе, а остальную окружность сделайте
transparent; затем ограничьте размер псевдоэлемента. - Для повторяющегося узора попробуйте
repeating-conic-gradient(). Маленький размер фона превращает его в сетку, шахматную клетку или орнамент. - Управляйте положением через
at 60% 45%, если визуальный центр не совпадает с центром блока. Небольшое смещение часто делает композицию живее. - Проверяйте контраст. Декоративный фон не должен ухудшать читаемость текста; при необходимости вынесите текст на однотонный слой.
Практический приём — оставить сам градиент в псевдоэлементе с pointer-events: none. Тогда украшение не перекрывает кнопки и ссылки, а содержимое компонента остаётся семантичным.
Итог
conic-gradient() — компактный инструмент для графики, построенной вокруг угла. Он хорош там, где форма меняется вместе с данными или состоянием интерфейса: у индикаторов, меток, диаграмм и небольших декоративных деталей.
Начинать стоит с простого сектора и чётких цветовых границ. Если результат требует множества независимых фигур, подписей и сложной доступности, SVG по-прежнему будет более подходящим выбором.