🎨 Конструктор анимированного градиента

Используйте . для класса или # для ID
Цвет 1
Цвет 2
Цвет 3
Цвет 4

Код CSS

📌 Инструкция по применению

Способ 1: Только CSS

  1. Скопируйте CSS код
  2. Вставьте в <head> вашего сайта между <style> тегами
  3. Добавьте указанный класс к нужному элементу

Способ 2: HTML + CSS

  1. Скопируйте HTML код
  2. Вставьте в начало <body> вашего сайта
  3. Добавьте указанный класс к нужному элементу

Советы

  • Для body используйте селектор "body" без точки
  • Для фона страницы лучше использовать "body" или "html, body"
  • Экспериментируйте с режимами наложения



Расширенные настройки цветов:
Добавлен 4-й цвет градиента
Генератор случайных цветовых палитр
Визуальное отображение выбранных цветов
Дополнительные типы градиентов:
Линейный (по умолчанию)
Радиальный
Конический (новинка)
Улучшенное управление анимацией:
Настройка направления анимации (нормальное, обратное, чередующееся)
Опция паузы при наведении
Выбор размера фона (150%-400%)

Тестовый режим:
Кнопка "Тест" для проверки как будет выглядеть контент поверх градиента
Возможность быстро проверить любой селектор

Два способа вставки:
Чистый CSS (для добавления в существующие стили)
HTML+CSS (готовый div для быстрой вставки)
Улучшенный интерфейс:
Адаптивная сетка настроек
Группировка параметров
Подсказки и инструкции
Современный дизайн

Дополнительные функции:
Сброс настроек к default
Подробная инструкция по применению
Советы по использованию

Конструктор теперь более мощный и удобный, сохраняя при этом простоту вставки в любой сайт.

Ваш заказ
  • image alt
    POWER Full 14
    POWER Full 14
    1000
  • image alt
    POWER Full 14
    POWER Full 14
    2000
3000
Выберите вариант доставки

Оставляя заявку, вы соглашаетесь на обработку персональных данных

2
Craftum Конструктор сайтов Craftum