Генератор Градиентов CSS Онлайн
Генерируйте CSS-градиенты визуально — линейные, радиальные, конические.
background: linear-gradient(135deg, #667eea, #764ba2);
Зачем это нужно
CSS-градиенты без написания кода вручную
Три типа
Линейные, радиальные и конические градиенты с визуальным редактором.
Без интернета
Генерация в браузере без подключения к серверу.
Готовый CSS
Скопируйте код background-image и вставьте в стили — готово.
Мгновенно
Предпросмотр обновляется в реальном времени при изменении параметров.
Как это работает
Три шага — никаких сложностей
Выберите тип градиента
Выберите линейный (linear), радиальный (radial) или конический (conic) градиент.
Настройте цвета и угол
Добавьте цветовые точки, настройте их положение и угол или форму градиента.
Скопируйте CSS-код
Скопируйте готовый CSS-код для background или background-image.
FAQ
Остались вопросы?
CSS поддерживает: linear-gradient() (линейный вдоль заданного угла), radial-gradient() (расходящийся из центра или точки), conic-gradient() (вращающийся вокруг центра, как циферблат). Каждый тип имеет повторяющуюся версию: repeating-linear-gradient(), repeating-radial-gradient(), repeating-conic-gradient().
Цветовые точки (color stops) указываются в скобках функции градиента: linear-gradient(to right, red 0%, blue 50%, green 100%). Каждая точка имеет цвет и позицию (в процентах, пикселях или другие единицы). Позицию можно опустить — браузер равномерно распределит точки.
Conic gradient поддерживается в Chrome 69+, Safari 12.1+, Firefox 83+, Edge 79+. Глобальное покрытие превышает 93%. Для старых браузеров потребуется полифил или резервный вариант с radial-gradient.
CSS transitions и animations не поддерживают градиенты напрямую (они не являются анимируемым свойством). Обходные пути: анимация background-position для повторяющихся градиентов, CSS переменные для анимации цветов через Houdini Paint API, или JavaScript для динамического изменения gradient строки.
Установите background на элемент с градиентом, затем используйте -webkit-background-clip: text и -webkit-text-fill-color: transparent (или стандартный background-clip: text). Это работает во всех современных браузерах.
CSS-градиенты: история, спецификация W3C и применение в современном дизайне
CSS-градиенты появились в спецификации CSS Images Module Level 3 (W3C). Браузеры поддерживали градиенты с ранними проприетарными префиксами (-webkit-gradient, -moz-linear-gradient) с 2008–2009 годов. Стандартный синтаксис без префиксов закрепился примерно в 2012–2013 годах. Конический градиент (conic-gradient) был добавлен значительно позже — как отдельная функция в CSS Images Level 4.
В современном веб-дизайне градиенты переживают ренессанс: плоский дизайн 2013–2016 годов уступил место «glassmorphism» и «aurora gradient» стилям, активно использующим многоцветные сложные градиенты. Сайты Apple, Stripe, Linear и других технологических компаний активно применяют градиентные фоны для создания визуальной глубины.
Перформанс-аспект: CSS-градиенты рендерятся напрямую GPU без дополнительных HTTP-запросов — в отличие от фоновых изображений. Это делает их предпочтительным выбором для декоративных фонов по сравнению с PNG или WebP. Сложные градиенты с большим количеством color stops могут незначительно нагружать GPU при перепрорисовке на анимированных элементах.