CSS Градиенты Письмо и отладка без догадок

CSS градиенты — одна из тех функций, которые кажутся простыми, пока вы смотрите на мутный бурый кусок, где ожидался чистый переход от синего к фиолетовому. Синтаксис имеет нюансы, путь отладки неясен, и большинство руководств останавливаются прямо перед тем, как начинаются проблемы.

Это практическое руководство. Каждый концепт сопровождается рабочим кодом. Откройте генератор CSS градиентов в другом вкладке — вы захотите экспериментировать, пока читаете.

Три типа — и в каких случаях использовать каждый

linear-gradient подходит для любых направлений: фоновые изображения, заполнение кнопок, разделители.

background: linear-gradient(135deg, #6366f1, #8b5cf6);

radial-gradient распространяется от центра — хорошо подходит для эффектов фокуса, свечения и круглых элементов интерфейса.

background: radial-gradient(circle at 30% 40%, #f59e0b, #ef4444);

conic-gradient проходит вокруг центрального угла — правильный выбор для диаграмм, спиннеров загрузки и цветовых колес.

background: conic-gradient(from 90deg, #3b82f6, #8b5cf6, #3b82f6);

Правило: если переход идёт в определённом направлении, используйте линейный. Если он распространяется, используйте радиальный. Если он вращается, используйте конический.

Разбор синтаксиса: части, которые мешают людям

Наиболее распространённой причиной путаницы является направление против угла. to right и 90deg оба дают градиент слева направо, но различаются тем, как они обрабатывают не квадратные элементы. Используйте ключевые слова направлений (to right, to bottom right) при желании, чтобы градиент адаптировался к форме элемента. Используйте значения в градусах, когда требуется точный контроль.

Точки цвета где важна точность:

/* Even distribution — browser figures out spacing */
background: linear-gradient(to right, #f97316, #8b5cf6);

/* Explicit stops */
background: linear-gradient(to right, #f97316 0%, #f97316 30%, #8b5cf6 60%, #8b5cf6 100%);

Вторая версия сохраняет жёлтый цвет на протяжении 30%, затем переходит к фиолетовому. Без явных позиций вы получаете плавный, равномерный переход.

Вы также можете принудительно создать жёсткую границу цвета — полезно для полосатых паттернов:

/* Hard mid-stop: sharp color transition at 50% */
background: linear-gradient(to right, #3b82f6 50%, #ef4444 50%);

Общие проблемы и то, что на самом деле вызывает их

Полосы — видимые полосы вместо плавного градиента — обычно появляются при низком контрасте или при переходе от тёмного к тёмному. Добавление незначительной средней точки и небольшого смещения цветов часто решает проблему:

/* Before — banding prone */
background: linear-gradient(180deg, #1e1b4b, #312e81);

/* After — add a mid nudge */
background: linear-gradient(180deg, #1e1b4b 0%, #2e2b6e 50%, #312e81 100%);

Цвета не смешиваются должным образом — фиолетовый цвет становится буро-коричневым между красным и синим — это известная проблема sRGB. CSS Color Level 4 ввёл in oklab интерполяцию, которая смешивает цвета в перцептивном пространстве:

/* Modern — cleaner blends */
background: linear-gradient(in oklab to right, #ef4444, #3b82f6);

Поддержка в браузерах устойчива к 2026 году. Если вам нужно поддерживать устаревшие версии, оставьте стандартный градиент как падение выше него.

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

.pie {
  background: #6366f1; /* fallback */
  background: conic-gradient(#6366f1 var(--pct), #e5e7eb var(--pct));
}

Слоение градиентов

CSS фоновые элементы принимают несколько значений — градиенты стекаются, как слои, в порядке, указанном в объявлении:

background:
  linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
  radial-gradient(ellipse at 20% 80%, #6366f1 0%, transparent 60%),
  radial-gradient(ellipse at 80% 20%, #f59e0b 0%, transparent 60%),
  #0f172a;

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

Одно ограничение: градиентные слои с rgba или прозрачными остановками взаимодействуют с тем, что находится ниже в том же background стеке, а не с фоном страницы. Планируйте порядок слоёв соответственно.

CSS переменные делают градиенты тематическими

Жёсткие цветовые значения в градиентах нарушают системы тем. Определите остановки как переменные:

:root {
  --gradient-start: #6366f1;
  --gradient-end: #8b5cf6;
  --gradient-angle: 135deg;
}

.card {
  background: linear-gradient(var(--gradient-angle), var(--gradient-start), var(--gradient-end));
}

[data-theme="warm"] {
  --gradient-start: #f97316;
  --gradient-end: #ef4444;
}

Переключение тем становится одним изменением переменной. Сочетайте это с @property для включения анимированных градиентов — без этого CSS не может интерполировать между значениями градиента:

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 135deg;
  inherits: false;
}

@keyframes rotate-gradient {
  to { --gradient-angle: 495deg; }
}

.animated {
  animation: rotate-gradient 4s linear infinite;
  background: linear-gradient(var(--gradient-angle), #6366f1, #8b5cf6);
}

Производительность: когда градиент стоит дороже изображения

Градиенты растеризуются в момент рендеринга на GPU. Для статичных и простых градиентов это легче, чем HTTP-запрос к изображению. Но сложные многослойные градиенты на часто обновляемых элементах могут создавать ботлекены при рендеринге.

Следите за этими паттернами:

• Более 3–4 слоёв градиентов на одном элементе
• Градиенты на position: fixed фоне — они перерисовываются на каждом кадре прокрутки
• Анимированные градиенты без @property — они вызывают полные перерисовки вместо обновлений, составленных на уровне композиции

Проверьте в DevTools → Производительность перед оптимизацией. Большинство использования градиентов находится далеко от этих пределов. Когда вы действительно сталкиваетесь с ботлекеном, конвертируйте в заранее отрендеренное изображение или перейдите к @property-основанной анимации.

Начните с генератора, завершите в коде

Самый быстрый путь к рабочему градиенту — визуальный: используйте Генератор CSS градиента для настройки цветов и позиций, затем скопируйте результат в свой стиль. Оттуда техники, описанные выше — извлечение переменных, стекание, oklab интерполяция — позволят вам расширить его до чего-то, пригодного для производства, без догадок.

Вам также может понравиться