Онлайн-генератор градиентного фона

Предпросмотр CSS-градиентов в реальном времени, поддержка линейных, радиальных и конических градиентов, генерация кода и экспорт изображений в один клик

Сообщить об ошибке

Режим выполнения в браузере: Ваши данные обрабатываются в браузере и не загружаются на сервер.

Скорость и стабильность: Скорость обработки зависит от вашего устройства и браузера. Для больших пакетов настольная версия может быть стабильнее.

Загрузка инструмента, подождите...

Если онлайн-инструмент не загружается или не запускается, попробуйте настольный инструмент. https://tools.yikeaigc.com/

Использование инструмента

Вернуться к старой версии

Сначала настройте градиент, затем скопируйте код или экспортируйте изображение. Поддерживает линейные, радиальные, конические, повторяющиеся градиенты и многоцветные точки; изменения параметров сразу видны в предпросмотре справа.

Настроить градиент

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

Тип градиентаКонический градиент подходит для цветовых кругов и кольцевых фонов

Направление и формаДля линейного градиента можно задать угол или быстрое направление

Угол линейного90°

Период повтора32%

Радиальная форма

Радиус размытия

Период повтора32%

Центр X50%

Центр Y50%

Начальный угол0°

Центр X50%

Центр Y50%

Повтор градиента Слой мягкого света Виньетка Тонкая текстура

Цветовые точкиПоддержка 2–10 точек, с прозрачностью и позицией

ШаблоныМожно взять за основу палитры

Экспорт кода

После проверки предпросмотра можно скопировать CSS или экспортировать PNG, JPG, SVG, CSS и пакет ресурсов.

Формат кодаВыберите тип объявления под задачу

Режим кода

Класс / переменная

С запасным цветом фона Сжать код

CSS-код

Размер изображенияПользовательский размер применяется к экспорту изображений и SVG

Пресеты размера

Качество JPG92%

Ширина (px)

Высота (px)

Скачать ресурсыПакет содержит CSS, SVG, PNG и настройки JSON

Предпросмотр

Gradient Preview Обновляется сразу после изменения параметров

ТипЛинейная

Цветовые точки2

Размер экспорта1920x1080

Длина кода0

Инструкции

Инструкция по использованию

Настройте тип градиента: выберите линейный, радиальный или конический градиент. Линейный подходит для баннеров и фонов веб-страниц, радиальный — для эффекта рассеивания от центра, конический — для колец, цветовых кругов и декоративных узоров.
Настройте направление и форму:
- Линейный градиент: можно использовать кнопки направления или задать направление от 0 до 360 градусов с помощью ползунка угла.
- Радиальный градиент: можно настроить форму круга или эллипса, область распространения и положение центральной точки X/Y.
- Конический градиент: можно настроить начальный угол и положение центральной точки.
Настройте цветовые точки: управляйте каждой цветовой точкой с помощью палитры выбора цвета, поля ввода HEX, процента позиции и параметра прозрачности. Можно добавлять, удалять, сортировать и инвертировать цвета, а также одним нажатием равномерно распределять точки.
Используйте параметры эффектов: можно включить повторяющийся градиент, слой мягкого света, виньетку и тонкую текстуру, чтобы фон лучше подходил для первого экрана сайта, карточек, постеров и дизайнерских материалов.
Копирование и экспорт: в разделе «Экспорт кода» выберите режим имени CSS-класса, только объявлений или CSS-переменных; можно скопировать CSS-код, а также экспортировать файлы PNG, JPG, SVG, CSS и ZIP-пакет ресурсов.
Сохранение и публикация: в разделе «Сохранить и поделиться» сохраните текущие настройки, создайте ссылку для публикации или вставьте существующий CSS-код градиента, чтобы загрузить его в инструмент и продолжить редактирование.

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

Ответ: линейный градиент создает переход вдоль прямой линии и подходит для фонов веб-страниц, кнопок и баннеров; радиальный градиент расходится наружу от центральной точки и подходит для подсветки и многослойных фонов; конический градиент вращается вокруг центра и подходит для цветовых кругов, колец и декоративных эффектов.

Ответ: нажмите «Добавить цвет», чтобы добавить цветовые точки, затем настройте для каждой цвет, процент позиции и прозрачность. Положение точек влияет на диапазон перехода цветов; также можно использовать «Равномерное распределение» для быстрой упорядоченной расстановки точек.

Ответ: повторяющиеся градиенты подходят для создания регулярных фонов, таких как полосы, волны и кольцевые повторяющиеся текстуры. Для линейных и радиальных градиентов можно включить режим повтора; для конических градиентов рекомендуется управлять эффектом с помощью цветовых точек и угла.

Ответ: можно экспортировать файлы PNG, JPG, SVG и CSS, а также скачать ZIP-пакет ресурсов. Пакет ресурсов содержит CSS-код, SVG-файл, PNG-изображение и JSON настроек, что удобно для архивирования и последующего редактирования.

Ответ: скопируйте сгенерированный CSS-код и вставьте его в файл стилей веб-страницы. Инструмент предлагает три режима: CSS-класс, только объявления и CSS-переменные — выберите подходящий в соответствии с практикой проекта.

Ответ: да. В разделе «Сохранение и分享» в области «Импорт CSS» вставьте код linear-gradient, radial-gradient или conic-gradient, затем нажмите «Загрузить в инструмент», после чего можно продолжить настройку цветов, угла и положения.

Ответ: нет. Генерация градиента, копирование кода, отрисовка изображения и упаковка ресурсов выполняются локально; загружать дизайн-контент на сервер не требуется.