Конструктор градиентов

Linear переходит цвета по прямой линии под выбранным углом. Radial излучает цвета из центральной точки кругом или эллипсом. Conic разворачивает цвета вокруг центра как цветовое колесо — подходит для диаграмм, спиннеров и радужных колец. Все три — нативный CSS, изображения не нужны.

Сколько угодно — кликните по полосе градиента, чтобы вставить новую. На практике 2–5 остановок дают самый эстетичный результат. Слишком много остановок похожих цветов смотрятся «грязно». У каждой остановки своя позиция (0–100%), hex-цвет и прозрачность для полупрозрачных эффектов.

Когда утилиты Tailwind способны передать градиент точь-в-точь, инструмент выдаёт именно их: bg-gradient-to-r from-[#3b82f6] to-[#8b5cf6], а для трёх остановок — с via-[#...]. Это работает для линейных градиентов под одним из восьми направлений, когда крайние остановки стоят на 0% и 100%, а средняя — на 50%. Во всех остальных случаях — радиальный или конический градиент, произвольный угол, сдвинутые остановки, больше трёх цветов — выдаётся произвольное значение bg-[...]: оно длиннее, зато воспроизводит превью точно, а не приблизительно.

Анимация использует CSS @keyframes, который сдвигает background-position на увеличенном (200%×200%) градиенте, создавая плавное циклическое движение. Скопируйте CSS-анимацию из панели экспорта и примените к элементу. Лучше всего работает с linear-градиентами от 3 остановок.

Да — выберите любую остановку и сдвиньте ползунок Opacity в 0. Это сгенерирует rgba()-значение для остановки и создаст плавное затухание в прозрачность. Идеально для hero-оверлеев, градиентов карточек, открывающих контент снизу, и эффектов глубины UI.

Скачивайте SVG, если нужен градиент как самостоятельный файл изображения — для дизайн-инструментов (Figma, Sketch), email-шаблонов без поддержки CSS, генерации PDF или как фоновое изображение. SVG содержит корректное определение <linearGradient> и масштабируется без потери качества.