Генератор анимированных градиентных фонов CSS

Создавайте динамические градиентные фоны онлайн: несколько цветов, направления анимации, готовые пресеты и генерация CSS-кода в один клик

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

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

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

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

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

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

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

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

Предпросмотр CSS Keyframes Текст / рамка / фон Настройки сохраняются

Количество цветов-

Тип анимации-

Длительность-

Назначение вывода-

Настройки палитры

Быстрее начать с готового пресета. Цветовые точки влияют на ритм перехода градиента; рекомендуется оставить 2–6 цветов.

Примеры При нажатии текущие цвета будут заменены

Основа градиента Линейный — для фона сайта, радиальный — для эффекта света, конический — для рамок или бейджей

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

Угол градиента135°

135°

Центр радиального / конического

Цветовые точки Сохраните 2 цвета; можно задать до 8

Параметры анимации

Для фона страницы рекомендуется медленная скорость. Чтобы ослабить эффект, включите код совместимости с уменьшением движения.

Тип анимации Выберите логику Keyframes

Направление Влияет на ключевые кадры background-position

Скорость и цикл Чем больше размер фона, тем заметнее смещение цветов

Длительность анимации10s

10s

Размер фона400%

400%

Кривая анимации

Бесконечный цикл Вперёд-назад Пауза при наведении Совместимость с уменьшением движения

Генерация и экспорт

Задайте класс и сценарий, скопируйте CSS в файл стилей проекта и добавьте класс нужному элементу.

Настройки Одна палитра для фона, текста или рамки

Имя CSS-класса

Назначение вывода

Мин. высота контейнера (px)

Скругление (px)

Ширина рамки (px)

Внутренний фон рамки

Сгенерированный CSS

Пример HTML

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

Animated Gradient Настройте цвета, направление и скорость — эффект обновится сразу. Подходит для первого экрана, кнопок, лендингов и карточек. CSS Ready

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

Ориентация-

Размер-

Класс-

Инструкции

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

Выберите цветовую схему: в «Настройках цветов» нажмите на пример схемы или вручную добавьте, удалите и настройте цвета и контрольные точки.
Задайте тип градиента: выберите линейный, радиальный или конический градиент и при необходимости настройте угол и положение центра.
Настройте параметры анимации: в «Параметрах анимации» задайте способ движения, направление, длительность, размер фона, кривую анимации и режим повтора.
Выберите назначение вывода: в «Генерации и экспорте» выберите фоновый контейнер, градиентный текст или градиентную рамку, а также задайте имя CSS-класса, скругление, рамку и другие параметры.
Предпросмотр эффекта: справа можно переключать режимы предпросмотра фона, карточки, текста и рамки; после проверки эффекта сгенерируйте код.
Скопируйте или скачайте код: нажмите «Копировать CSS», «Копировать HTML» или «Скачать CSS», чтобы применить код к элементам страницы.
Сохраните настройки: нажмите «Сохранить настройки», чтобы сохранить текущие параметры и продолжить редактирование в следующий раз.

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

Ответ: скопируйте CSS-код в файл стилей, затем добавьте имя класса из примера HTML к элементу, на котором нужно показать градиент.

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

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

Ответ: да. В назначении вывода выберите «Градиентный текст», и инструмент сгенерирует CSS-код с background-clip:text.

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