Генератор CSS-градиентов
Создавайте красивые градиенты и получайте готовый CSS-код
Настройки градиента
Предпросмотр
CSS-код
Примеры использования
Тёплый градиент
Красивый тёплый градиент с переходом от оранжевого рассвета к розовому закату.
Океанский градиент
Прохладный градиент в морском стиле — от глубокого синего к бирюзовому.
Радиальное свечение
Радиальный градиент, создающий эффект прожектора или свечения из центра.
Возможности
Несколько типов градиентов
Создавайте линейные, радиальные и конические градиенты с полным контролем направления и позиции
Предпросмотр в реальном времени
Наблюдайте за обновлением градиента в реальном времени при изменении цветов, точек, углов и позиций
Несколько цветовых точек
Добавляйте неограниченное количество цветовых точек с контролем позиции для создания сложных красивых градиентов
Конфиденциальность
Всё работает в вашем браузере — данные не отправляются на сервер
Как пользоваться?
Выберите тип и цвета
Выберите тип градиента (линейный, радиальный, конический) и добавьте цветовые точки с помощью палитры.
Настройте направление
Используйте ползунок угла для линейных градиентов или управление позицией для радиальных и конических.
Скопируйте CSS
Нажмите кнопку «Копировать CSS», чтобы скопировать сгенерированный код градиента в буфер обмена.
Часто задаваемые вопросы
Что такое генератор CSS-градиентов?
Генератор CSS-градиентов позволяет визуально создавать градиентные фоны без запоминания синтаксиса. Выберите тип градиента (линейный, радиальный или конический), добавьте цветовые точки, настройте угол или позицию — и инструмент выдаст чистый CSS, который можно вставить прямо в проект.
Основные возможности
Все три типа CSS-градиентов в одном инструменте. Неограниченное количество цветовых точек с возможностью перетаскивания. Ползунок угла для линейных градиентов и управление позицией для радиальных/конических. Красивые пресеты для быстрого старта. Сгенерированный CSS включает -webkit-префиксы для поддержки старых браузеров.
Распространённые сценарии
Фоны секций-героев, состояния кнопок при наведении, оверлеи карточек и декоративные рамки. Радиальные градиенты хорошо подходят для эффектов прожектора, а конические — для цветовых кругов или визуализаций в стиле круговых диаграмм.
Советы
Придерживайтесь 2-3 цветов для аккуратного дизайна. Используйте аналоговые цвета (соседние на цветовом круге) для плавных переходов. Для неброского фона попробуйте градиент между двумя очень похожими оттенками. И всегда проверяйте градиент как на светлом, так и на тёмном фоне.
Конфиденциальность
Работает полностью в вашем браузере. Никакие цвета, настройки или данные никуда не загружаются.