CSS-градиенты по-простому: линейные, радиальные, цветовые точки

Градиенты — одна из тех штук в CSS, что кажутся пустяком, а потом съедают полдня. Хочешь мягкий переход из индиго в розовый под шапкой сайта, пишешь linear-gradient(indigo, pink), а он растекается сверху вниз, хотя тебе нужно было слева направо. И ты снова гуглишь синтаксис угла.

Генератор CSS-градиентов убирает этот круг: тянешь ползунок, смотришь превью, копируешь строку. Но полезно понимать, что там под капотом, — поэтому вот короткая версия.

Линейный градиент и ловушка с углом

Линейный градиент смешивает цвета вдоль прямой. linear-gradient(90deg, #6366f1, #ec4899) ведёт индиго слева к розовому справа.

Спотыкаются обычно на угле. Он считается не так, как подсказывает интуиция с уроков геометрии. 0deg смотрит строго вверх, дальше значение растёт по часовой стрелке: 90deg — вправо, 180deg — вниз, 270deg — влево. Если угол не указать вовсе, браузер берёт to bottom, а это те же 180deg. Вот почему linear-gradient(indigo, pink) уходит вниз. Ты просто не сказал ему иначе.

Вместо градусов можно писать ключевые слова: to right, to bottom left. Читаются понятнее, но на неквадратных блоках ведут себя чуть иначе, потому что to bottom left целится в реальный угол, а не в фиксированные 225deg. На большинстве макетов разницы не заметишь.

Всю работу делают цветовые точки

У каждого цвета в градиенте есть позиция — процент от 0% до 100%. Две точки дают обычный переход. Добавь третью на 50% — получишь смесь из трёх цветов. Самое интересное начинается, когда две точки ставят на одну и ту же позицию:

background: linear-gradient(90deg, #6366f1 50%, #ec4899 50%);

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

Радиальные градиенты

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

Одно поведение по умолчанию стоит запомнить: если форму не назвать, радиальный градиент будет эллипсом, растянутым под размер блока, а не кругом. Пиши circle явно, когда нужно ровное круглое свечение. В генераторе можно переключаться между ними и сразу видеть, как меняется форма.

Тот самый подвох

Градиент живёт в background-image, а не в background-color. И плавно анимировать его обычным transition не выйдет — браузеру нечего интерполировать между двумя значениями background-image, поэтому он не плавно перетекает, а щёлкает. Обычно выкручиваются так: кладут два градиента друг на друга и меняют прозрачность, либо анимируют background-position у растянутого градиента. Знать это лучше до того, как потратишь двадцать минут в догадках, почему эффект при наведении дёргается.

Поддержка браузерами

Ничего из этого больше не требует вендорных префиксов. linear-gradient() и radial-gradient() работают без префиксов во всех крупных браузерах примерно с 2012 года. Строчки с -webkit-, что до сих пор попадаются в старых ответах на Stack Overflow, теперь просто балласт — можно удалять.

Нужен градиентный текст? Задай градиент как background, потом добавь background-clip: text и color: transparent. Инструмент отдаёт сам градиент, а этот рецепт его переиспользует.

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