Генератор Градиентов CSS
Создавайте потрясающие линейные, радиальные и конические CSS-градиенты с живым предпросмотром. Выбирайте цвета, настраивайте точки и сразу копируйте CSS-код.
Живой Предпросмотр Экспорт CSS Одним Кликом Тщательно Подобранные Пресеты 100% В Браузере
Живой Предпросмотр
0%100%
100%100%
CSS Вывод
.element {
background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
}Галерея Пресетов
Возможности Генератора Градиентов
Всё необходимое для создания красивых градиентов для ваших веб-проектов.
Живой Предпросмотр
Наблюдайте как градиент обновляется в реальном времени при изменении цветов и направления.
Экспорт CSS Одним Кликом
Скопируйте сгенерированный CSS-код градиента прямо в буфер обмена.
Тщательно Подобранные Пресеты
Выберите один из 12 тщательно подобранных пресетов градиентов для быстрого старта.
100% В Браузере
Никакие данные не отправляются на сервер. Всё работает локально в вашем браузере.
Сценарии Использования Градиентов
CSS-градиенты присутствуют повсюду в современном веб-дизайне.
Фоны Страниц
Создавайте яркие фоны для секций hero, страниц и разделителей.
Наложения на Изображения
Накладывайте градиенты на фото для улучшения читаемости текста или художественных эффектов.
Компоненты UI
Применяйте градиенты к кнопкам, карточкам и индикаторам прогресса для глубины и стиля.
Градиентный Текст
В сочетании с background-clip: text создайте потрясающую многоцветную градиентную типографику.
Часто задаваемые вопросы
Найдите ответы на самые частые вопросы.