Что такое цветовой градиент и как создавать его в CSS

CSS-градиент - это плавный переход между двумя и более цветами, который браузер отрисовывает самостоятельно, без единого графического файла. Именно это делает градиенты одним из самых практичных инструментов в арсенале фронтенд-разработчика. Они сокращают количество HTTP-запросов, идеально масштабируются при любом разрешении и обновляются буквально одной строкой кода. Хочешь стилизовать кнопку призыва к действию, создать фоновое изображение для hero-секции или добавить глубины карточному компоненту - понимание принципов работы CSS-градиентов даёт тебе полный контроль над каждым пикселем перехода.

Линейные градиенты

Функция linear-gradient в CSS рисует переход цветов вдоль прямой линии. Базовый синтаксис выглядит так:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Параметр direction задаёт направление градиента. Можно использовать ключевые слова - например, to right, to bottom left - или угол в градусах, например 135deg. Если направление не указано, по умолчанию используется to bottom (сверху вниз, 180 градусов).

Точки остановки цвета дают тонкий контроль над переходом. Каждая точка может включать необязательную позицию:

/* Два цвета, слева направо */
background-image: linear-gradient(to right, #6a11cb, #2575fc);

/* Три цвета с явными позициями */
background-image: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #fda085 100%);

Указание позиции в процентах для каждой точки позволяет создавать чёткие границы (поставь две точки на одной позиции) или сжимать и расширять зону перехода. Именно на этом строятся полосатые паттерны и прогресс-бары. Прежде чем работать со значениями цветов, полезно разобраться, как CSS их интерпретирует - наше руководство по конвертации HEX в RGB объясняет разницу между форматами и когда какой из них уместнее.

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

Функция radial-gradient в CSS распространяет цвет от центральной точки в форме эллипса или окружности. Синтаксис включает три необязательных параметра: форму, размер и позицию.

background-image: radial-gradient(shape size at position, color-stop1, color-stop2);

Что делает каждый параметр:

• Форма: circle задаёт идеальную окружность; ellipse (значение по умолчанию) растягивается по форме элемента.
• Размер: Ключевые слова closest-side, farthest-corner или явные единицы длины определяют, насколько далеко распространяется градиент.
• Позиция: Работает так же, как background-position - можно использовать ключевые слова, проценты или пиксели.

/* Эффект прожектора */
background-image: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.3), transparent 60%);

Радиальные градиенты отлично подходят для эффектов прожектора, светящихся кнопок и мягких виньеток поверх изображений в hero-секциях.

Конические градиенты - современный инструмент

Функция conic-gradient в CSS - самая новая из трёх, и именно её большинство разработчиков обходят стороной. Вместо того чтобы распространяться от центра наружу, она разворачивается вокруг центральной точки - как цветовое колесо или круговая диаграмма. Спецификация W3C CSS Images Level 4 формально описывает конические градиенты, и все современные браузеры уже их поддерживают.

/* Круговая диаграмма - 40% синего, 60% кораллового */
background-image: conic-gradient(#4f8ef7 0% 40%, #ff6b6b 40% 100%);

/* Полное цветовое колесо */
background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

Начальный угол можно повернуть с помощью from Xdeg, а центр сместить через at X% Y%:

background-image: conic-gradient(from 45deg at 60% 50%, #667eea, #764ba2, #667eea);

Практическое применение: круговые диаграммы на чистом CSS, паттерны в клетку и динамические индикаторы загрузки.

Повторяющиеся градиенты

CSS предоставляет функции repeating-linear-gradient и repeating-radial-gradient для мозаичного повторения паттерна по всему элементу - без необходимости вручную перечислять десятки точек остановки. Главное правило: паттерн повторяется только в том случае, если последняя точка остановки не достигает 100%.

/* Диагональные полосы */
background-image: repeating-linear-gradient(
  45deg,
  #f8f9fa,
  #f8f9fa 10px,
  #dee2e6 10px,
  #dee2e6 20px
);

/* Концентрические кольца */
background-image: repeating-radial-gradient(
  circle at center,
  #fff 0px,
  #fff 5px,
  #e9ecef 5px,
  #e9ecef 10px
);

Повторяющиеся градиенты выгодны с точки зрения производительности: браузер генерирует весь паттерн из компактного CSS-правила, без загрузки какого-либо графического ресурса.

Практические примеры

Кнопка с градиентом

Классический сценарий - яркая кнопка призыва к действию. Хитрость в том, чтобы задать background-size и добавить анимацию при наведении:

.btn-gradient {
  background-image: linear-gradient(90deg, #6a11cb, #2575fc);
  border: none;
  border-radius: 6px;
  color: #fff;
  padding: 12px 28px;
  transition: opacity 0.3s ease;
}
.btn-gradient:hover {
  opacity: 0.85;
}

Градиентный фон для hero-секции

Градиентный фон на элементе body или в hero-секции сразу задаёт визуальный тон страницы:

.hero {
  background-image: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
}

Тёмный оверлей поверх изображения

Наложение градиента поверх фотографии делает текст читаемым без отдельного HTML-элемента для затемнения:

.card-image {
  background-image:
    linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.75) 100%),
    url('photo.jpg');
  background-size: cover;
}

Градиентный текст

Для градиентного текста нужно три свойства, работающих вместе:

.gradient-text {
  background-image: linear-gradient(90deg, #f093fb, #f5576c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Обрати внимание: свойство background-clip: text в некоторых браузерах всё ещё требует префикса -webkit-, поэтому всегда указывай оба объявления. Проверить и подобрать цвета до написания кода можно с помощью инструмента Color Explorer.

Совместимость с браузерами и запасные варианты

Линейные и радиальные градиенты полностью поддерживаются всеми основными браузерами с 2013 года. Конические градиенты получили широкую поддержку в 2021 году (Chrome 69, Firefox 83, Safari 12.1). По данным Can I Use, конические градиенты сейчас охватывают более 93% мирового использования браузеров.

Правильная стратегия запасных вариантов проста:

1. Сначала объяви сплошной background-color. Браузеры без поддержки градиентов покажут именно этот цвет.
2. Затем добавь правило background-image с градиентом. Поддерживающие браузеры наложат его поверх.
3. Для конических градиентов добавь запасной linear-gradient между сплошным цветом и коническим правилом.

.element {
  background-color: #6a11cb;                        /* запасной вариант */
  background-image: linear-gradient(90deg, #6a11cb, #2575fc); /* современные браузеры */
}

После написания правил с градиентами стоит прогнать таблицу стилей через CSS Minifier, чтобы убрать лишние пробелы и уменьшить размер файла перед деплоем.

Генератор CSS-градиентов онлайн

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

Если нужно конвертировать цвет из макета перед сборкой градиента, конвертер HEX в RGB и Color Picker - удобные отправные точки перед открытием конструктора градиентов.

Создавай красивые CSS-градиенты мгновенно

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

Попробовать DevDeck Color Tool →

Заключение

CSS-градиенты заменяют графические ресурсы чистым кодом - они не зависят от разрешения экрана, легко обновляются и быстро загружаются. Начни с linear-gradient для направленных переходов, используй radial-gradient для эффектов прожектора и свечения, а conic-gradient пробуй там, где нужны круговые или разворачивающиеся паттерны. Всегда добавляй запасной сплошной цвет, следи за необходимостью префиксов для градиентного текста и используй живые инструменты, чтобы ускорить итерации дизайна. С этим набором инструментов у тебя есть всё необходимое, чтобы заменить статичные градиентные изображения по всему проекту.