Об этом инструменте
CSS-градиенты повсюду — фоны hero, кнопки, карточки — но писать синтаксис вручную и угадывать углы неудобно. Этот визуальный конструктор позволяет добавлять и перетаскивать цветовые точки, задавать угол и переключаться между линейными, радиальными и коническими градиентами, наблюдая результат в живом превью.
Когда всё выглядит правильно, скопируйте готовый CSS для background прямо в свою таблицу стилей. Он полностью клиентский, так что экспериментируйте сколько угодно — ничего не отправляется.
Частые вопросы
Добавляет ли генератор вендорные префиксы вроде -webkit-linear-gradient?
Нет. Синтаксис с вендорными префиксами нужен только очень старым браузерам (до 2012 года), поэтому инструмент выводит стандартные linear-gradient(), radial-gradient() и conic-gradient(), которые понимает любой современный браузер.
Сохраняется ли или отправляется куда-то мой дизайн градиента?
Нет. Всё — цветовые точки, угол и предпросмотр — генерируется прямо в браузере в реальном времени; ничего не отправляется на сервер.
В чём разница между линейным, радиальным и коническим градиентом?
Линейный смешивает цвета вдоль прямой линии под заданным углом, радиальный расходится кругами от центральной точки наружу, а конический словно цветовое колесо разворачивает цвета вокруг центральной точки.
Сколько цветовых точек можно добавить?
Сколько угодно — нажмите 'Add', чтобы вставить ещё одну точку, перетаскивайте её ползунок позиции и удаляйте любую точку, кроме последних двух.
Можно ли вставить сгенерированный CSS прямо в свою таблицу стилей?
Да. Нажмите Copy и вставьте строку `background: ...;` прямо в любое CSS-правило или инлайн-стиль — редактировать ничего не нужно.