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

Градиенты в веб-дизайне

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

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

• Линейный (linear-gradient) — цвета перетекают вдоль заданного угла. Универсальный вариант для фонов, кнопок и шапок.
• Радиальный (radial-gradient) — переход расходится от центра к краям, создавая эффект источника света или объёма.
• Конический (conic-gradient) — цвета идут по кругу вокруг точки; на нём удобно строить диаграммы, цветовые круги и «загрузочные» индикаторы.

Как подобрать красивый градиент

Самые надёжные сочетания — переходы между соседними тонами цветового круга (синий → фиолетовый, оранжевый → розовый) и мягкие пастельные пары: они выглядят естественно, потому что напоминают переходы света в природе. Резкие переходы между контрастными цветами используйте точечно — для акцентов, а не для больших фонов. Добавление третьего, промежуточного цвета делает переход глубже; едва заметный сдвиг оттенка (почти монохром) смотрится дорого и спокойно.

Читаемость текста и доступность

Если поверх градиента ляжет текст, проверяйте контраст в самой светлой и самой тёмной точке фона — по стандарту WCAG нужно не меньше 4,5:1 для обычного текста. Помогает полупрозрачная подложка под текстом или затемняющий слой поверх градиента. Не полагайтесь на цвет как единственный носитель смысла — часть пользователей различает оттенки иначе.

Производительность

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

Частые вопросы

Обновлено: 2 июля 2026