Генератор градиентов — Создание CSS градиентов
Создавайте красивые CSS градиенты с полным контролем над цветами, позициями и типами. Генерируйте код для CSS, TailwindCSS и используйте сохранённые градиенты.
Предпросмотр градиента
Настройки градиента
Цветовые стопы
Стоп 1
Стоп 2
Сгенерированный код
.gradient {
background: linear-gradient(to right, #3498db 0%, #e74c3c 100%);
}Похожие инструменты
Откройте для себя другие полезные инструменты для работы с цветами
Полная инструкция по использованию генератора градиентов
Генератор градиентов — это мощный онлайн-инструмент для создания красивых CSS градиентов с полным контролем над цветами, позициями и типами. С помощью этого сервиса вы можете создавать профессиональные градиенты для вашего дизайна.
Шаг 1: Выберите тип градиента
Выберите тип градиента: линейный (linear) или радиальный (radial). Линейные градиенты создают плавный переход в определённом направлении, а радиальные — от центра к краям.
Шаг 2: Настройте направление или форму
Для линейных градиентов выберите направление (to top, to right, to bottom, to left, или диагональные направления). Для радиальных градиентов выберите форму: круг (circle) или эллипс (ellipse).
Шаг 3: Добавьте цветовые стопы
Добавьте цветовые стопы, нажав кнопку 'Добавить стоп'. Для каждого стопа установите цвет (используя цветовой пикер или ввод HEX) и позицию (0-100%). Минимум 2 стопа требуется для градиента.
Шаг 4: Используйте дополнительные функции
Используйте кнопку 'Случайный градиент' для генерации случайного градиента, 'Равномерное распределение' для равномерного распределения позиций стопов, и 'Обратить градиент' для изменения порядка цветов.
Шаг 5: Скопируйте сгенерированный код
Выберите формат кода (CSS, TailwindCSS или строка) и нажмите кнопку 'Копировать'. Код будет скопирован в буфер обмена и готов к использованию в вашем проекте.
Шаг 6: Сохраните градиент
Нажмите кнопку 'Сохранить градиент' для сохранения текущего градиента в историю. Сохранённые градиенты можно загрузить позже или удалить.
Как использовать генератор градиентов
Как создать линейный градиент
Выберите тип 'Линейный' и направление (например, 'to right'). Добавьте минимум 2 цветовых стопа с разными цветами и позициями. Градиент будет создан автоматически.
Как создать радиальный градиент
Выберите тип 'Радиальный' и форму (круг или эллипс). Добавьте цветовые стопы. Радиальный градиент создаст плавный переход от центра к краям.
Как использовать TailwindCSS градиенты
После создания градиента выберите формат 'TailwindCSS' в блоке кода. Скопируйте сгенерированные классы и используйте их в вашем HTML с TailwindCSS.
Как сохранить и загрузить градиенты
Нажмите кнопку 'Сохранить градиент' для сохранения текущего градиента. Сохранённые градиенты отображаются в разделе истории. Нажмите на градиент для загрузки или кнопку 'Удалить' для удаления.
Как использовать случайный градиент
Нажмите кнопку 'Случайный градиент' для автоматической генерации случайного градиента с случайными цветами, типом и направлением. Это отлично подходит для вдохновения.
Как равномерно распределить стопы
Нажмите кнопку 'Равномерное распределение' для автоматического равномерного распределения позиций всех цветовых стопов. Это полезно для создания симметричных градиентов.
Часто задаваемые вопросы о генераторе градиентов
Какие типы градиентов поддерживаются?
Генератор поддерживает два типа градиентов: линейные (linear) и радиальные (radial). Линейные градиенты создают плавный переход в определённом направлении, а радиальные — от центра к краям.
Сколько цветовых стопов можно добавить?
Вы можете добавить любое количество цветовых стопов, но минимум 2 стопа требуется для создания градиента. Больше стопов позволяет создать более сложные и интересные градиенты.
Можно ли использовать градиенты в TailwindCSS?
Да, генератор создаёт TailwindCSS классы для ваших градиентов. Выберите формат 'TailwindCSS' в блоке кода и скопируйте сгенерированные классы.
Как сохранить градиент?
Нажмите кнопку 'Сохранить градиент' для сохранения текущего градиента в историю. Сохранённые градиенты хранятся в localStorage браузера и доступны при следующем посещении.
Что такое равномерное распределение?
Равномерное распределение автоматически распределяет позиции всех цветовых стопов равномерно от 0% до 100%. Это полезно для создания симметричных градиентов.
Можно ли использовать градиенты для фона сайта?
Да, градиенты отлично подходят для фона сайта. Скопируйте сгенерированный CSS код и используйте его в свойстве background вашего элемента.
Как обратить градиент?
Нажмите кнопку 'Обратить градиент' для изменения порядка цветов в градиенте. Это перевернёт позиции всех стопов, создав обратный эффект.
Можно ли использовать градиенты для мобильного дизайна?
Да, градиенты отлично работают на мобильных устройствах. CSS градиенты полностью поддерживаются современными браузерами и мобильными устройствами.