Создавайте линейные, радиальные и конические CSS-градиенты с нуля с помощью перетаскиваемых точек и готовых пресетов. Мгновенно скопируйте готовый CSS.

Живой предпросмотр
Пресеты
Тип градиента
Угол
°
Точки цвета
Перетащите маркер для перемещения точки или нажмите на полосу, чтобы добавить новую. Выберите точку для редактирования цвета.
Выбранная точка
%
CSS
background: ;

Всё вычисляется в реальном времени в вашем браузере — без регистрации, абсолютно бесплатно.


О Генератор градиентов

Генератор градиентов создаёт пользовательские CSS-градиенты с нуля. Выберите линейный, радиальный или конический тип, задайте угол и сформируйте смешение с помощью редактора с несколькими точками: перетаскивайте маркеры для перемещения точек, щёлкайте по полосе, чтобы добавить новые, и перекрашивайте любую точку с помощью палитры — живое превью обновляется по мере работы.

Готовые пресеты дают сильную отправную точку, когда не хочется начинать с чистого листа, а действия в один клик — случайный, развернуть, повернуть на 45° — ускоряют исследование вариантов. Сгенерированный CSS всегда виден и синхронизирован с превью, так что вы копируете именно то, что видели.

Всё рассчитывается в реальном времени прямо в браузере бесплатно. Скопируйте полное CSS-правило или только значение background и вставьте его в таблицу стилей, стиль кнопки или героическую секцию — простой генератор CSS-градиентов для фонов, наложений и акцентов интерфейса.

Как использовать Генератор градиентов

  1. Выберите тип градиента: линейный, радиальный или конический.
  2. Начните с пресета или нажмите «Случайный» для мгновенной отправной точки.
  3. Перетаскивайте маркеры точек, чтобы расположить цвета, щёлкайте по полосе, чтобы добавить точки, и редактируйте цвет каждой точки.
  4. Настройте угол или используйте «Развернуть» и «Повернуть на 45°», чтобы переориентировать смешение.
  5. Скопируйте CSS-правило или значение background и вставьте его в свой проект.

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

Да. Инструмент полностью работает на стороне клиента — без регистрации, кредитов и ограничений на количество создаваемых или копируемых градиентов.

Линейный градиент смешивает цвета вдоль прямой линии под выбранным углом. Радиальный градиент расходится от центральной точки кругами. Конический градиент разворачивает цвета вокруг центральной точки, как круговая диаграмма, что отлично подходит для цветовых кругов и индикаторов прогресса.

Градиенту нужно как минимум две точки, и вы можете продолжать щёлкать по полосе, чтобы добавлять новые. У каждой точки свой цвет и перетаскиваемое положение, поэтому сложные многоцветные смешения строить легко.

Линейные и радиальные градиенты поддерживаются повсеместно. Конические градиенты поддерживаются во всех современных браузерах, но не в очень старых, поэтому предусмотрите резервный background-color, если нужна поддержка устаревших версий.

Да — используйте сопутствующий инструмент «Генератор градиента из изображения», который извлекает доминирующие цвета загруженной картинки и превращает их в редактируемые точки градиента. Этот инструмент — его аналог для создания с нуля.

Поделиться

Популярные запросы
генератор градиента создатель css градиента генератор линейного градиента создатель радиального градиента конический градиент css бесплатный генератор градиента
Нужна помощь?
Возникла проблема с этим инструментом? Сообщите нам.
Сообщить о проблеме

Добавьте этот бесплатный инструмент на свой сайт — скопируйте и вставьте код ниже.