CSS-градиент

Линейный, радиальный или конический — безлимит цветовых точек, живой предпросмотр, мгновенный CSS.

Что это за генератор CSS gradient?

Этот бесплатный генератор CSS gradient позволяет создавать линейные, радиальные и конические градиенты с неограниченными color stops, визуально настраивать угол через диск, переключать repeating-режим и копировать production-уровень CSS — всё работает в браузере.

Как создать многошаговый CSS gradient онлайн?

Выберите тип градиента (linear, radial или conic), добавьте столько color stops, сколько нужно, перетащите их вдоль полосы для установки позиций, затем скопируйте сгенерированный CSS. Предпросмотр обновляется на лету, а код в одном клике.

Ключевые возможности

Три типа градиента
Linear, radial и conic — у каждого свои эргономичные контролы (диск угла, селекторы формы и позиции, начальный угол).
Неограниченные color stops
Добавляйте столько точек, сколько нужно, задавайте цвет и позицию каждой, удаляйте или переупорядочивайте в один клик.
Repeating-режим
Один переключатель превращает любой градиент в repeating-linear, repeating-radial или repeating-conic — для полос, сканлиний и солнечных лучей.
Production-копия
Получите канонический CSS или Tailwind-класс с произвольным значением одним кликом.

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

Выберите тип градиента из сегментированного контрола. Для linear перетащите диск угла; для radial выберите форму и позицию; для conic задайте начальный угол. Настройте каждый color stop в полосе ниже, добавьте новые кнопкой плюс, скопируйте CSS, когда будете готовы.

Часто задаваемые вопросы

В чём разница между linear, radial и conic градиентами?

Linear смешивает вдоль прямой линии под углом, radial распространяется от центральной точки наружу в круге или эллипсе, а conic проходит цвета вокруг центральной точки как круговая диаграмма.

Как работают цветовые точки с позициями?

Каждая точка имеет цвет и опциональный процент позиции. Браузер интерполирует между последовательными точками. Закрепление двух соседних точек на одной позиции создаёт жёсткую линию — так строятся полосы или разделённые фоны.

Когда использовать repeating gradient?

Включите режим Повтор для полос, сканлиний или солнечных лучей. Браузер бесконечно тайлит один и тот же градиент; две точки на 0% и 10% заполнят бокс шириной 10% повторяющимся узором.

Создано командой Tooljar в соответствии со спецификациями W3C CSS Images Module Level 3 и Level 4, с той же синтаксисом градиента, что парсит браузер, так что предпросмотр это ровно то, что нарисует production CSS.