conic-gradient: конический градиент

Переход цветов по кругу вокруг точки: спидометры, прогресс.

Уровень: средний 10 разделов 12 минут

1. Что это и зачем

Переход цветов по кругу вокруг точки: спидометры, прогресс.

Цвет в CSS задаётся в цветовых моделях: hex, rgb(a), hsl(a) и их нотациях, включая современные oklch. Фон управляется свойством background с десятком подсвойств — от цвета до градиентов и повторения картинки.

{title} — это про контраст, а не про «красоту»: сначала читаемость, потом настроение.

2. Синтаксис и пример

.wheel { background: conic-gradient(red, yellow, green, red); }

Запись выше — базовый вариант использования. Обратите внимание, как conic-gradient: конический градиент вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

Градиенты — это фоновые изображения, сгенерированные браузером; их можно накладывать и комбинировать с картинками. Прозрачность достигается альфа-каналом, а не «лёгким» оттенком.

В реальной разметке conic-gradient: конический градиент встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

{title} — это про контраст, а не про «красоту»: сначала читаемость, потом настроение.

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

Современная модель цвета (hsl, oklch, color()) поддерживается везде в 2020-х. Старые hex-значения тоже всегда работают, поэтому миграция безопасна.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

Цвета идут по углу, чаще всего от 0 до 360°.

Диапазоны углов позволяют рисовать «отрезки» колеса.

7. Практическое задание

Сделайте круговой индикатор прогресса.

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

.wheel { background: conic-gradient(red, yellow, green, red); }

8. Как применять в проектах

Палитра заводится в переменные :root и используется во всём интерфейсе; тёмная тема меняет переменные, а не отдельные страницы.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

цвета вынесены в переменные;
контраст текста и фона ≥ 4.5:1 для текста;
состояния (hover/active) различимы по цвету И форме;
градиенты не конфликтуют с тёмной темой;
прозрачность не «серотит» текст;

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

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам