Генератор CSS-градиентов: создавайте красивые градиенты без написания кода

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

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

Почему CSS-градиенты заменили фоны на основе изображений

Старый подход — экспорт градиентного PNG размером 1×1000px и его горизонтальное замощение — имел реальную цену. Каждый градиент был обращением к серверу, расходом байтов в сети и бременем сопровождения при смене цветов. Что важнее, PNG-градиенты не могли динамически реагировать на размеры экрана, переключение тем или состояния наведения.

CSS-градиенты решают всё это. Они отрисовываются GPU в реальном времени, мгновенно реагируют на изменения состояния JavaScript, идеально масштабируются при любом разрешении, работают с переходами и анимациями CSS и добавляют ноль байтов к вашему набору ресурсов. Поддержка браузеров теперь 100% во всех современных браузерах и держится так с 2014 года. Нет причин использовать градиенты на основе изображений для сплошных цветовых переходов в новых проектах.

Три типа CSS-градиентов

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

Линейный градиент переходит между цветами вдоль прямой линии. Направление может быть любым углом или выражаться ключевым словом вроде to right или to bottom right. Это наиболее часто используемый тип градиента, покрывающий подавляющее большинство потребностей дизайна.

/* Classic diagonal purple gradient */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Top to bottom (default direction) */
background: linear-gradient(#f8fafc, #e2e8f0);

/* Left to right with three color stops */
background: linear-gradient(to right, #f97316, #ec4899, #8b5cf6);

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

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

/* Circular glow from center */
background: radial-gradient(circle, #6366f1 0%, #1e1b4b 100%);

/* Ellipse glow at top-left corner */
background: radial-gradient(ellipse at top left, #fbbf24 0%, transparent 60%);

/* Positioned spotlight */
background: radial-gradient(circle at 30% 40%, #e0f2fe, #0284c7);

3. Конический градиент

Конический градиент развёртывает цвета вокруг центральной точки, как стрелки часов. Это делает его уникально подходящим для круговых диаграмм, цветовых кругов и анимаций индикаторов загрузки. Это был последний из трёх типов градиентов, получивший универсальную поддержку, появившись во всех основных браузерах к 2021 году.

/* Pie chart with three segments */
background: conic-gradient(
  #6366f1 0deg 120deg,
  #ec4899 120deg 240deg,
  #f97316 240deg 360deg
);

/* Color wheel */
background: conic-gradient(
  hsl(0, 100%, 50%),
  hsl(60, 100%, 50%),
  hsl(120, 100%, 50%),
  hsl(180, 100%, 50%),
  hsl(240, 100%, 50%),
  hsl(300, 100%, 50%),
  hsl(360, 100%, 50%)
);

Понимание системы углов для линейных градиентов

Параметр угла в linear-gradient следует соглашению, удивляющему многих разработчиков, потому что отличается от стандартных математических углов. Вот соответствие:

• 0deg — снизу вверх (градиент течёт вверх)
• 90deg — слева направо (самый частый горизонтальный градиент)
• 135deg — по диагонали, из верхнего левого в нижний правый угол
• 180deg — сверху вниз (то же, что по умолчанию без указания угла)
• 225deg — по диагонали, из нижнего правого в верхний левый угол
• 270deg — справа налево

Эквиваленты-ключевые слова — to top, to right, to bottom left — часто читаемее числовых углов для распространённых направлений. Для точных диагональных эффектов числовые градусы дают точный контроль. Популярный диагональный градиент от фиолетового к индиго использует 135deg:

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Формы радиального градиента: круг против эллипса

По умолчанию radial-gradient создаёт эллипс размером под элемент. Вы можете переопределить это двумя ключевыми словами формы:

• circle — принудительно создаёт идеальный круг независимо от соотношения сторон элемента. Используйте это для эффектов свечения и фонов-прожекторов, где нужно равномерное радиальное затухание во всех направлениях.
• ellipse — значение по умолчанию, растягивается под контейнер. Используйте это для тонких фоновых заливок, которым нужно естественно адаптироваться к любой форме элемента.

Ключевое слово at позволяет переместить центр градиента в любую точку элемента с помощью любой длины или процента CSS. at center, at top left, at 20% 80% — все допустимы. Позиционирование особенно мощно для создания смещённых от центра эффектов рассеянного света:

/* Glow coming from upper-right corner */
background: radial-gradient(ellipse at top right, rgba(251,191,36,0.4), transparent 60%);

/* Multiple radial gradients layered */
background:
  radial-gradient(circle at 20% 30%, rgba(99,102,241,0.3), transparent 40%),
  radial-gradient(circle at 80% 70%, rgba(236,72,153,0.3), transparent 40%),
  #0f172a;

Конические градиенты для круговых диаграмм и индикаторов загрузки

Способность конического градиента развёртываться по кругу делает его нативным решением CSS для двух классических UI-компонентов, которые раньше требовали SVG или JavaScript:

Для кольца прогресса совместите конический градиент с круговой маской. Для круговой диаграммы сегменты конического градиента напрямую соответствуют процентам данных. Сегмент от0deg до 72deg представляет ровно 20% полного круга. Это делает перевод данных в CSS простым — умножьте процент на 3,6, чтобы получить значение в градусах.

Многоступенчатые градиенты и резкие переходы для полосатых узоров

Цветовые точки не обязаны смешиваться плавно. Когда две соседние точки имеют одинаковую позицию, переход между ними становится мгновенным — резкий переход (hard stop). Эта техника позволяет создавать полосатые узоры, шахматные доски и фоны с разлинованными линиями полностью в CSS:

/* Candy stripe pattern using hard stops */
background: linear-gradient(
  45deg,
  #6366f1 25%,
  transparent 25%,
  transparent 50%,
  #6366f1 50%,
  #6366f1 75%,
  transparent 75%
);
background-size: 40px 40px;

/* Warning stripe — alternating color hard stops */
background: repeating-linear-gradient(
  -45deg,
  #fbbf24,
  #fbbf24 10px,
  #1e293b 10px,
  #1e293b 20px
);

Реальные сценарии применения с примерами кода

Фоны hero-секций

Многоступенчатый линейный градиент с сеткой из двух радиальных бликов придаёт hero-секциям глубину индивидуальной иллюстрации без каких-либо файлов изображений:

.hero {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.15), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(236,72,153,0.15), transparent 50%),
    linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  min-height: 100vh;
}

Эффекты наведения на кнопки

Градиенты можно анимировать при наведении с помощью приёма background-position — задайте градиенту размер 200% и смещайте его позицию при наведении:

.btn {
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
  background-size: 200% 200%;
  background-position: 0% 50%;
  transition: background-position 0.4s ease;
}
.btn:hover {
  background-position: 100% 50%;
}

Рамки карточек с border-image

Свойство border-image принимает градиент, позволяя создавать градиентные рамки без элементов-обёрток или хаков с псевдоэлементами (для сплошных фонов):

.card-gradient-border {
  border: 2px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #6366f1, #ec4899) border-box;
}

Полосы прогресса

Градиентная полоса прогресса одновременно передаёт значение и визуальную энергию. Сочетайте её с переходомwidth для плавной анимации:

.progress-bar {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  width: 73%; /* Controlled by JS or CSS custom property */
  transition: width 0.6s ease;
}

Сравнение типов градиентов

Советы по выбору хороших цветов градиента

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

Исправление — провести переход через более насыщенный промежуточный оттенок. Вместо красного к зелёному напрямую попробуйте красный → оранжевый → жёлто-зелёный для яркого перехода. Либо оставайтесь в пределах соседнего диапазона оттенков — семейство фиолетовый-розовый, семейство индиго-голубой — что всегда даёт чистые результаты, потому что середина остаётся насыщенной.

Несколько практических рекомендаций:

• Держите насыщенность высокой на обоих концах, если хотите яркий градиент. Смешивание насыщенного цвета с ненасыщенным создаёт неловкую мёртвую зону посередине.
• Смешивание разных значений светлоты (от светлого к тёмному) внутри одного семейства оттенков почти всегда выглядит профессионально и хорошо работает в UI-фонах.
• Добавьте промежуточную цветовую точку на 50%, чтобы направить оттенок середины — это самая мощная коррекция для грязных градиентов.
• Ограничивайте градиенты двумя-тремя точками для большинства UI-работ. Более трёх точек обычно выглядят хаотично, если только вы намеренно не создаёте радугу или визуализацию данных.

Доступность: текст на градиентах

Использование генератора CSS-градиентов BrowseryTools

Генератор CSS-градиентов даёт живой визуальный предпросмотр по мере того, как вы настраиваете каждый параметр. Вот как использовать его эффективно:

• Выберите тип градиента: переключайтесь между линейным, радиальным и коническим в верхней части инструмента.
• Добавьте цветовые точки: кликните по полосе градиента, чтобы добавить новые точки. Перетаскивайте точки влево и вправо, чтобы регулировать их позиции. Кликните по точке, чтобы открыть выбор цвета и изменить её цвет и прозрачность.
• Настройте направление или угол: для линейных градиентов вращайте колесо угла или введите точное значение в градусах. Для радиальных задайте форму и положение.
• Просматривайте в контексте: живой предпросмотр обновляется мгновенно. Вы видите ровно, как будет выглядеть ваш градиент, до копирования хоть одной строки.
• Скопируйте CSS: нажмите кнопку «Copy CSS», чтобы получить готовый к работе CSS для свойства background, готовый вставить в любую таблицу стилей или фреймворк.

Всё работает в вашем браузере. Никакие определения градиентов никуда не отправляются — это чисто клиентский инструмент. Вы можете использовать его офлайн после загрузки страницы.

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

CSS-градиенты поддерживаются во всех основных браузерах с 2014 года, что делает их безопасными для использования без полифилов или запасных вариантов практически в любом продакшен-окружении. Конические градиенты появились позже, но теперь полностью поддерживаются в Chrome 69+, Firefox 83+, Safari 12.1+ и Edge 79+ — покрывая значительно более 97% мирового использования браузеров на 2026 год. Единственный сценарий, где вам может понадобиться запасной вариант — поддержка очень старых версий Android WebView в корпоративных мобильных приложениях.