Три вида и зачем они нужны
- Линейный — цвет меняется вдоль прямой. Вариант по умолчанию для фонов, кнопок и подложек.
- Радиальный — цвет расходится от точки. Хорош для световых пятен и мягких виньеток.
- Конический — цвет идёт по кругу. Именно он позволяет делать круговые диаграммы и цветовые круги на чистом CSS.
Точки — это позиции, а не только цвета
У каждой точки есть цвет и позиция в процентах. Две точки на одной позиции дают резкую границу, а не переход: так получаются полоски, шкалы прогресса и секторы диаграммы вообще без картинок. Сведите две точки в панели выше — это видно сразу.
Грязная середина
Интерполяция между двумя насыщенными оттенками в sRGB проходит через выцветший
серый — заметнее всего между синим и оранжевым или фиолетовым и зелёным. Есть два
честных решения. Добавить третью точку посередине с нужным цветом — работает
везде. Или интерполировать перцептивно через linear-gradient(in oklab, ...) —
чище, но требует запасного варианта для старых браузеров.
Где им место
Градиент не несёт информации, поэтому не должен спорить с содержимым. Выдерживают проверку структурные применения: мягкая подложка фона, затемнение, которое сохраняет читаемость текста поверх фотографии, изменение состояния кнопки. Страница, где у каждой поверхности свой градиент, читается как шум — поэтому в дизайне этого сайта градиент ровно один, за первым экраном.
Вопросы
Почему двухцветный градиент грязнеет в середине?+
Потому что интерполяция в sRGB проводит середину через обесцвеченный серый, и заметнее всего это между дополнительными оттенками — синим и жёлтым. Лечится либо третьей точкой посередине с тем цветом, который вам действительно нужен, либо интерполяцией в перцептивном пространстве через `in oklab`: она поддерживается современными браузерами, но запасной вариант не помешает.
Где 0deg?+
В CSS 0deg направлен вверх, а угол растёт по часовой стрелке: 90deg идёт слева направо, 180deg — сверху вниз. Люди на этом спотыкаются, потому что старый синтаксис с префиксом -webkit- отсчитывал угол от другой точки. Если после рефакторинга градиент оказался зеркальным, причина обычно в этом.
Можно сделать градиентную рамку или градиентный текст?+
Можно, но не обычными свойствами. Для текста задайте градиент фоном и добавьте background-clip: text с прозрачным цветом. Для рамки используйте border-image или нарисуйте градиент на обёртке и вложите содержимое с отступом. Напрямую в border-color градиент не принимается.
Градиенты чего-то стоят по производительности?+
Отрисовать градиент дёшево, и он остаётся резким при любом размере, в отличие от фоновой картинки. Цена появляется при анимации: анимировать background-position или сами точки — значит перерисовывать каждый кадр. Анимируйте вместо этого transform или opacity на отдельном слое.