Генератор CSS-градиентов
Выберите два цвета, укажите линейный или радиальный градиент и настройте угол, чтобы увидеть предпросмотр в реальном времени. Соответствующий CSS-код генерируется мгновенно и готов к копированию прямо в вашу таблицу стилей.
background: linear-gradient(90deg, #ff9a00, #60acfc);Как это работает
Выберите два цвета с помощью палитр, укажите «линейный» или «радиальный», а для линейного градиента перетащите ползунок угла. Предпросмотр и код CSS ниже обновляются мгновенно при любом изменении.
Совет
Угол 90deg идёт слева направо, 180deg — сверху вниз, а 0deg — снизу вверх. Поэкспериментируйте с ползунком, чтобы увидеть, как меняется направление градиента.
В чём разница между линейным и радиальным градиентом?
Линейный градиент переходит вдоль прямой линии под заданным углом. Радиальный градиент расходится кругом от центра наружу, независимо от угла.
Больше инструментов в этой категории
Калькулятор экспозиции
Находите эквивалентные значения экспозиции для диафрагмы, выдержки и ISO.
Калькулятор соотношения сторон
Пропорционально масштабируйте изображение или видео и находите упрощённое соотношение.
Проверка контраста
Проверьте, соответствуют ли цвет текста и фона рекомендациям WCAG по контрасту.
Генератор цветовой палитры
Превратите любой базовый цвет в комплементарную, аналоговую и триадную палитры.
Конвертер цветовых форматов
Мгновенно конвертируйте любой цвет между HEX, RGB, HSL и CMYK — с копированием каждого формата одним кликом.
Генератор типографической шкалы
Создайте гармоничный набор размеров шрифта на основе базового размера и коэффициента масштаба — готовый для копирования в виде CSS-переменных.