С этим инструментом что-то не так?
О «Генератор CSS-градиентов онлайн Онлайн»
Этот инструмент визуально создаёт CSS-градиенты: linear, radial, conic. Добавляйте color stops, выбирайте направление/угол, прозрачность — и получаете готовый CSS для вставки в стили.
Градиенты повсюду в современном вебе: hero-фоны, состояния кнопок, акценты карточек, градиентный текст. Рукописный CSS-синтаксис громоздкий, визуальный редактор позволяет подбирать плавные переходы без проб и ошибок.
Поддерживаются множественные stops, проценты, интерполяция в разных цветовых пространствах и conic для круговых эффектов. Можно скопировать как CSS или как Tailwind-класс.
Как пользоваться этим инструментом
Как собрать CSS-объявление linear-gradient с двумя стопами
Выбор стопов
"Color 1" и "Color 2" принимают любой CSS-цвет: hex (`#1e3a8a`), rgb (`rgb(30 58 138)`), rgba с alpha или именованный (`navy`). Первый стоп — 0%, второй — 100%.
Угол
"Angle (deg)" задаёт направление в градусах. `0` снизу→вверх, `90` слева→направо, `180` сверху→вниз (умолчание CSS), `45` — классическая диагональ.
Запуск
Результат: единственное поле `css` — `linear-gradient(<angle>deg, <color1>, <color2>)`. Вставляйте как значение для `background:` или `background-image:`.
Больше двух стопов
Для radial, conic или 3+ стопов правьте вывод вручную — синтаксис `linear-gradient(45deg, #fff 0%, #000 50%, #f00 100%)`. Либо берите редактор побогаче — этот инструмент намеренно минимален для двухстоповых линейных.