Linear · Radial · Conic
Конструктор градиентов
Создавайте эффектные CSS-градиенты с интерактивными остановками цвета, 18 пресетами и экспортом в Tailwind, SVG и CSS-анимации.
Кликните, чтобы добавить остановку · Перетащите для смещения
Экспорт
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
--gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
bg-gradient-to-br from-[#3b82f6] to-[#8b5cf6]
Тип градиента
Цветовые остановки
#3b82f60%
#8b5cf6100%
Пресеты
Как это работает
1
Выберите тип
Linear, radial или conic — каждый создаёт свой визуальный эффект.
2
Добавьте остановки
Кликайте по полосе градиента, чтобы добавить остановки, перетаскивайте для смещения, редактируйте цвет и прозрачность.
3
Настройте
Меняйте угол направления, форму и размер для radial, позицию центра и число остановок.
4
Экспортируйте
Копируйте готовый CSS, классы Tailwind или CSS-переменную. Скачивайте SVG или включайте анимацию.