Работа с градиентами
CSS-градиент — это изображение, которое рисует браузер: дёшево, не зависит от разрешения и легко испортить незаметно. Почти все плохие градиенты объясняются двумя проблемами, и обе устранимы.
Открыть конструктор градиентовВыбор типа
Линейные имеют направление и подходят фонам, кнопкам и разделителям. Радиальные расходятся из точки — это про свечение и акценты. Конические вращаются вокруг центра, поэтому естественно ложатся на круговые диаграммы, цветовые круги и блик, обегающий карточку.
Серая середина
Браузеры по умолчанию интерполируют в sRGB, а прямая между двумя противоположными оттенками проходит рядом с серым — поэтому градиент из синего в оранжевый проседает посередине. Добавьте опорную точку с промежуточным оттенком или интерполируйте в OKLCH, и середина останется насыщенной.
Полосы на больших площадях
На широкой площади 8-битный градиент может показать заметные ступени. Помогают более близкие по светлоте опорные точки, а остаток скрывает лёгкое зерно: глаз читает текстуру вместо ступеней.
По шагам
- Выбирайте тип по нужной форме, а не по желаемому виду.
- Начните с двух опорных точек, третью добавляйте только чтобы починить тусклую середину.
- Сначала правьте угол или центр — размещение решает больше, чем палитра.
- Смотрите градиент на всю ширину: там проявляются полосы.
- Скопируйте CSS, а цвета опорных точек сохраните токенами, если они часть бренда.
Частые вопросы
Градиенты дорого отрисовывать?
Практически никогда: их рисует композитор, и они дешевле картинки той же площади. Исключение — анимация: двигать background-position или прозрачность дёшево, а анимация самих цветов заставляет перерисовывать каждый кадр.
Можно ли класть текст на градиент?
Да, но проверяйте контраст в самой тёмной и самой светлой точке, а не в среднем. Текст, проходящий по одному краю, легко провалится на другом.
Везде ли работают конические градиенты?
Во всех актуальных браузерах — да. Совсем старые их не поддерживают, поэтому задайте им запасной сплошной background-color, если вы их ещё поддерживаете.