0°90°180°270°360°
0%
100%
background: linear-gradient(90deg, #2e73ff 0%, #30fc8f 100%);
Возможности Gradient Generator
CSS + Tailwind
Генерация кода для обычного CSS и Tailwind CSS. Переключайтесь между форматами одним кликом.
Live Preview
Мгновенный предпросмотр градиента при любых изменениях цветов, угла или позиций.
Множество цветов
Добавляйте неограниченное количество цветовых точек. Настройка позиции каждого цвета отдельно.
Готовые пресеты
Коллекция красивых градиентов для быстрого старта.
Типы градиентов
Linear Gradient
Линейный градиент с настройкой угла от 0° до 360°. Цвета переходят по прямой линии.
Radial Gradient
Радиальный градиент от центра к краям. Идеален для создания эффектов свечения и фокуса.
Примеры кода
Обычный CSS
.element {
background: linear-gradient(90deg, #2e73ff 0%, #30fc8f 100%);
}Tailwind CSS
<div class="bg-gradient-to-r from-[#2e73ff] to-[#30fc8f]">
Gradient background
</div>С несколькими цветами
<div class="bg-gradient-to-r from-[#667eea] via-[#764ba2] to-[#f093fb]">
Multi-color gradient
</div>