Модификации

Плавающий градиентный фон для любого блока Tilda

2026-08-12 08:01 Эффекты

Инструкция

Этот код добавляет к любому стандартному блоку Tilda плавно движущийся градиентный фон. Цвета медленно перетекают друг в друга, а сам фон слегка масштабируется и поворачивается, поэтому движение получается мягким и более живым, чем у обычной анимации .

Модификацию можно использовать для обложек, полноэкранных экранов, промоблоков, форм, карточек и других секций, которым нужен динамичный фон без видео и сторонних библиотек.
  1. В настройках блока Tilda, которому хотите добавить плавающий градиентный фон, в поле CSS Class укажите uc-gradient-screen.
  2. Добавьте на страницу отдельный блок T123 «HTML-код» и вставьте в него код целиком. T123 можно расположить в любом месте страницы.
  3. Чтобы изменить цвета градиента, в начале кода замените значения переменных --gradient-color-1, --gradient-color-2, --gradient-color-3, --gradient-color-4, --gradient-color-5 и --gradient-color-6 на свои HEX-цвета.
  4. Чтобы изменить скорость движения градиента, найдите значение 22s и замените его на нужное. Чем больше число, тем медленнее движется фон. Например, 15s даст более активную анимацию, а 30s — более спокойную.
  5. По умолчанию блок занимает всю высоту экрана. Если это не нужно, удалите свойства height: 100vh; и min-height: 100vh;.
  6. Опубликуйте страницу и проверьте отображение блока на компьютере и мобильном устройстве.
Рекомендации:
Лучше использовать 4–6 близких или гармонично сочетающихся оттенков. Если цвета слишком контрастные, фон будет выглядеть пёстро и может мешать читать текст.

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

Для текста поверх такого фона обязательно проверяйте контраст. Если фон достаточно светлый, используйте тёмный текст; если тёмный — белый. Для сложного многоцветного градиента лучше избегать очень тонкого шрифта.

Увеличенный слой inset: -20% нужен специально: во время масштабирования и небольшого поворота градиента по краям блока не появляются пустые области.

В код также добавлено отключение анимации для пользователей, у которых в системе включено уменьшение движения.
<!-- Модификация, которая добавляет блоку Tilda с классом uc-gradient-screen плавно движущийся градиентный фон. Источник: bulgkate.ru -->

<style>
.uc-gradient-screen {
    /* ЦВЕТА ГРАДИЕНТА — МЕНЯТЬ ЗДЕСЬ */
    --gradient-color-1: #d9a7c7;
    --gradient-color-2: #f6c3ad;
    --gradient-color-3: #f8e6c8;
    --gradient-color-4: #d8c9eb;
    --gradient-color-5: #b8d8e8;
    --gradient-color-6: #c7b5dc;

    position: relative;
    isolation: isolate;

    height: 100vh;
    min-height: 100vh;

    overflow: hidden;
}

.uc-gradient-screen::before {
    content: "";

    position: absolute;
    inset: -20%;
    z-index: 0;

    pointer-events: none;

    background:
        linear-gradient(
            140deg,
            var(--gradient-color-1),
            var(--gradient-color-2),
            var(--gradient-color-3),
            var(--gradient-color-4),
            var(--gradient-color-5),
            var(--gradient-color-6)
        );

    background-size: 500% 500%;
    transform-origin: center;

    animation:
        gradientFlow
        22s
        ease-in-out
        infinite;
}

/* Контент блока поверх градиента */
.uc-gradient-screen > * {
    position: relative;
    z-index: 1;
}

/* Плавное движение градиента */
@keyframes gradientFlow {
    0% {
        background-position: 0% 40%;
        transform: scale(1) rotate(0deg);
    }

    25% {
        background-position: 60% 20%;
        transform: scale(1.08) rotate(2deg);
    }

    50% {
        background-position: 100% 60%;
        transform: scale(1.15) rotate(0deg);
    }

    75% {
        background-position: 40% 100%;
        transform: scale(1.08) rotate(-2deg);
    }

    100% {
        background-position: 0% 40%;
        transform: scale(1) rotate(0deg);
    }
}

/* Отключение движения в системном режиме */
@media (prefers-reduced-motion: reduce) {
    .uc-gradient-screen::before {
        animation: none;
        transform: none;
    }
}
</style>