Анимация градиента у текста Тильда

магазин кастомных решений для тильды

Здесь собраны самые уникальные решения для тильды, с помощью которых вы сможете расширить функционал своих сайтов

Получить доступ

Обучающие продукты

Бесплатные модификации

Магазин модификаций

Курс «Tilda Custom Base»

бесплатный

Курс «Tilda Custom Main»

базовый

Курс «Tilda Custom Pro»

для опытных

Курс «Стилизация личного кабинета»

скоро

Курс «Tilda Custom Нейросети»

скоро

скоро старт курса по стилизации личных кабинетов

чтобы не пропустить анонс обучения и старт продаж по самой выгодной цене — подписывайся на чат-предзаписи

вступить в чат-предзаписи

120+

30+ бесплатных модификаций для твоих проектов на тильде

Уникальные модификации, с помощью которых вы сделаете свои проекты ещё круче, продуманнее и функциональнее

Перейти

телеграм-канал для дизайнеров

Чтобы не пропустить выход новых уроков, бесплатных и платных модификаций и также анонсов обучения — подписывайся на мой телеграм-канал

Связаться со мной

Я на связи с 10:00 до 18:00 (мск) в будние дни

Заказать разработку сайта

Вы можете заказать у меня не только разработку сайта на тильде, но и также дизайн сложных продуктов в фигме

Сайт-портфолио

Заказать сайт

Главная
/
Модификации
/
Анимация градиента у текста

Смотрите обучающее видео на YouTube канале

Анимация градиента у текста

Смотреть

Код для модификации

Вариант 1

Вариант для статичного текста и стандартной анимации

Смотреть код

Вариант 2

Вариант для step by step анимации

Смотреть код

Вариант 3

Вариант для конкретно выделенного слова в тексте

Смотреть код

   <!--https://dsgnmax.ru/animation-gradient-txt--> <style>
.gradient  .tn-atom {        /*Прописываем свой класс*/
    background: linear-gradient(270deg, #9517F9, #FF46CB, #09C4FF);       /*Задаем свои цвета для градиента*/
    background: -webkit-linear-gradient (270deg, #9517F9, #FF46CB, #09C4FF);      /*Задаем свои цвета для градиента*/
    background-clip: text;
    -webkit-background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    animation: dbm-animation 4s ease infinite;      /*Длительность и плавность анимации*/
    -webkit-animation: dbm-animation 4s ease infinite;      /*Длительность и плавность анимации*/
    background-size: 400% 200%;
}
@keyframes dbm-animation {
   0% {
    background-position: 0%  center;
    }
   50% {
    background-position: 50%  center;
    }
   100% {
    background-position: 0%  center;
    }
}
</style>

   <!--https://dsgnmax.ru/animation-gradient-txt--> <style>
.gradient  .tn-atom__sbs-anim-wrapper  .tn-atom {        /*Прописываем свой класс*/
    background: linear-gradient(270deg, #9517F9, #FF46CB, #09C4FF);       /*Задаем свои цвета для градиента*/
    background: -webkit-linear-gradient (270deg, #9517F9, #FF46CB, #09C4FF);      /*Задаем свои цвета для градиента*/
    background-clip: text;
    -webkit-background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    animation: dbm-animation 4s ease infinite;      /*Длительность и плавность анимации*/
    -webkit-animation: dbm-animation 4s ease infinite;      /*Длительность и плавность анимации*/
    background-size: 400% 200%;
}
@keyframes dbm-animation {
   0% {
    background-position: 0%  center;
    }
   50% {
    background-position: 50%  center;
    }
   100% {
    background-position: 0%  center;
    }
}
</style>

   <!--https://dsgnmax.ru/animation-gradient-txt--> <style>
.gradient .tn-atom span {        /*Прописываем свой класс*/
    background: linear-gradient(270deg, #9517F9, #FF46CB, #09C4FF);       /*Задаем свои цвета для градиента*/
    background: -webkit-linear-gradient (270deg, #9517F9, #FF46CB, #09C4FF);      /*Задаем свои цвета для градиента*/
    background-clip: text;
    -webkit-background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    animation: dbm-animation 4s ease infinite;      /*Длительность и плавность анимации*/
    -webkit-animation: dbm-animation 4s ease infinite;      /*Длительность и плавность анимации*/
    background-size: 400% 200%;
}
@keyframes dbm-animation {
   0% {
    background-position: 0%  center;
    }
   50% {
    background-position: 50%  center;
    }
   100% {
    background-position: 0%  center;
    }
}
</style>