Генератор CSS-градиентов: линейный, радиальный и конический

Как пользоваться

Выберите Тип градиента: линия, которая меняет цвет (линейный), расхождение от центра (радиальный) или поворот вокруг точки (конический).
Задайте Угол для линейного или конического градиента. Для радиального он не действует.
Выберите каждый цвет в поле Опорные цвета и задайте его положение в процентах. Добавляйте или удаляйте точки, от двух до шести.
Нажмите кнопку копирования в блоке CSS и вставьте строку в таблицу стилей или начните с одного из Готовых наборов.

Три типа градиента

Линейный: цвет меняется вдоль прямой линии. Угол 0deg указывает вверх, а угол поворачивается по часовой стрелке, поэтому 90deg идёт слева направо, а 180deg — сверху вниз.
Радиальный: цвета расходятся от центра по кругу, от первой точки до последней.
Конический: цвета поворачиваются вокруг центра, как стрелки часов. Угол задаёт, с какого места начинается первый цвет.

Опорные цвета и их положение

Опорный цвет — это цвет в положении от 0 % до 100 % вдоль градиента. Редактор записывает точки в порядке положения, поэтому порядок ввода не меняет картинку. От двух до шести точек делают градиент понятным, а CSS — коротким.

Код — это стандартный синтаксис CSS, который читают современные браузеры, а предпросмотр рисует ваш браузер из того же значения, поэтому вы видите то, что получит таблица стилей.

Пример: готовый набор «Рассвет»

Набор «Рассвет» — линейный градиент под углом 135deg, который идёт от левого верхнего угла к правому нижнему. В нём три опорные точки: оранжевый при 0 %, жёлтый при 50 % и розовый при 100 %.

CSS для него: background: linear-gradient(135deg, #f97316 0%, #facc15 50%, #ec4899 100%);

Частые вопросы

Что означает 0deg в линейном градиенте?

0deg указывает вверх, поэтому при таком угле цвета меняются снизу вверх. Угол поворачивается по часовой стрелке: 90deg идёт слева направо, а 180deg — сверху вниз.

Почему мои точки в коде стоят в другом порядке?

Код записывает точки в порядке положения, потому что CSS читает их в этом порядке. Если вы ввели 80 % раньше 20 %, код покажет сначала 20 %, а картинка останется той же.

Можно ли использовать прозрачный цвет?

Этот редактор принимает сплошные цвета в виде hex. Для прозрачности отредактируйте код вручную и используйте цвет с альфа-значением.

Сколько опорных цветов можно использовать?

От двух до шести. Редактор держит число в этом диапазоне, поэтому у градиента всегда есть начало и конец.

Работает ли код во всех браузерах?

Синтаксис — стандартная форма, которую поддерживают современные браузеры. Проверьте результат в браузерах, которыми пользуются ваши посетители, особенно если вы поддерживаете старые версии.

Отправляется ли мой дизайн куда-либо?

Нет. Градиент строится в вашем браузере. Ничего не сохраняется и не отправляется на сервер.

Можно ли использовать градиент для цвета текста?

Этот инструмент пишет только объявление фона. Поместить градиент за текст можно, но для этого нужно больше CSS, чем пишет инструмент.

Источники

Цифры и текст в последний раз проверены вторник, 10 ноября 2026 г..