Градиенты в CSS: как сделать и где использовать
Градиент оживляет плоский фон и делает кнопку заметнее. Разбираем три вида градиентов в CSS, готовый код и ошибки, из-за которых градиент выглядит грязно.
Три вида градиента
- Линейный (
linear-gradient): цвет меняется вдоль прямой. Самый частый вариант для фона, шапки и кнопок. - Радиальный (
radial-gradient): цвет расходится кругом или эллипсом из точки. Хорош для мягкого свечения за заголовком. - Конический (
conic-gradient): цвет идёт по кругу вокруг центра, как на циферблате. Из него получаются круговые диаграммы и цветовые круги.
Готовый код
/* сверху вниз, из фиолетового в розовый */
background: linear-gradient(180deg, #6d3fd8, #ff4f8b);
/* по диагонали, с тремя цветами */
background: linear-gradient(135deg, #14c8a8 0%, #3a7bd5 50%, #6d3fd8 100%);
/* свечение в левом верхнем углу */
background: radial-gradient(circle at 20% 20%, #ffc23d, transparent 60%), #15121f;Угол 0deg ведёт градиент снизу вверх, 90deg слева направо, 180deg сверху вниз. Проценты после цвета называются точками остановки: где цвет становится «чистым».
Градиентный текст
.title {
background: linear-gradient(90deg, #ff4f8b, #ffc23d);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}Используйте это только для крупных заголовков: на мелком тексте градиент не виден, а читать становится труднее.
Почему градиент выглядит грязно
- Цвета с разных сторон круга. Переход от синего к жёлтому проходит через серо-зелёную середину. Берите соседние оттенки или добавьте третий цвет посередине.
- Слишком много цветов. Двух-трёх хватает почти всегда.
- Текст на пёстром фоне. Проверьте контраст текста и с самым светлым, и с самым тёмным краем градиента в проверке контраста.
Где взять
В разделе «Градиенты» собраны готовые бесплатные градиенты: нажмите на любой, и CSS-код скопируется. Подобрать цвета для своего градиента поможет генератор палитр.
Частые вопросы
Как сделать градиентный фон на CSS?
Задайте свойство background: linear-gradient(угол, цвет1, цвет2), например linear-gradient(135deg, #6d3fd8, #ff4f8b).
Чем linear-gradient отличается от radial-gradient?
Линейный градиент меняет цвет вдоль прямой, радиальный расходится кругом или эллипсом из точки.
Почему градиент получается серым посередине?
Цвета с противоположных сторон цветового круга смешиваются в серый. Возьмите соседние оттенки или добавьте третий цвет в середину.
