Зміст
Коротко
У випуску №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 і далі буде кращим вибором.