Заказать эффект

Фонfx/20

AW-Flow — Animated Gradient

Медленно перетекающий градиент из трёх цветов для фона блока или фигуры. Без видео и картинок.

Запуск
постоянно
Параметров
6
Телефоны
как на десктопе
Код
HTML-блок
.awf-gradient-bg

Готовый код

Это тот же код, что сейчас работает в превью: значения подставлены из конструктора, внешние библиотеки не нужны.

класс: awf-gradient-bg1,3 КБ · HTML + CSS + JS
<!-- AW-Flow — Animated Gradient · класс элемента: awf-gradient-bg -->
<style>
.awf-gradient-bg {
  --awf-c1: #7c5cff;
  --awf-c2: #e4dcff;
  --awf-c3: #8fd3ff;
  --awf-angle: 120deg;
  --awf-speed: 10s;
  --awf-size: 300%;
}
/* фигура Zero Block: фон рисуется на .tn-atom */
.awf-gradient-bg .tn-atom {
  background-image: linear-gradient(var(--awf-angle), var(--awf-c1), var(--awf-c2), var(--awf-c3), var(--awf-c1)) !important;
  background-size: var(--awf-size) var(--awf-size) !important;
  animation: awf-gradient-bg-flow var(--awf-speed) ease-in-out infinite alternate;
}
/* обычный блок без .tn-atom */
.awf-gradient-bg:not(:has(.tn-atom)) {
  background-image: linear-gradient(var(--awf-angle), var(--awf-c1), var(--awf-c2), var(--awf-c3), var(--awf-c1)) !important;
  background-size: var(--awf-size) var(--awf-size) !important;
  animation: awf-gradient-bg-flow var(--awf-speed) ease-in-out infinite alternate;
}
@keyframes awf-gradient-bg-flow {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}
/* уважение к настройке «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  .awf-gradient-bg, .awf-gradient-bg .tn-atom { animation: none !important; }
}
</style>

Вставляется в HTML-блок на той же странице, где элемент с классом.

Как добавить в Tilda

Эффект работает на опубликованной странице и в режиме предпросмотра — в самом редакторе Tilda скрипты не выполняются.

  1. Назначьте класс элементу. В Zero Block кликните правой кнопкой по нужному элементу и выберите пункт добавления CSS-класса (Add CSS class name). Впишите awf-gradient-bg — без точки. Класс ставится на сам элемент, не на весь артборд.
  2. Добавьте HTML-блок. На этой же странице добавьте блок T123 «HTML-код» (проще всего найти поиском в библиотеке блоков) или элемент HTML внутри Zero Block.
  3. Вставьте код. Скопируйте код целиком и вставьте в этот HTML-блок, сохраните и опубликуйте страницу.
  4. Меняете настройки? Сначала удалите старый код этого эффекта, затем вставьте новый и снова опубликуйте страницу.
  5. Разные настройки — разные классы. Для второго варианта на той же странице задайте в конструкторе другой класс, например awf-gradient-bg-2, и вставьте его код отдельно.