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

Видеоинструкция по подключению

Пошаговая инструкция с подключением кода

ID Шаблона
Категория
Последнее обновление
20 Февраля, 2024
Бесплатно, Эффекты, Текст
35027287
Скриншоты шаблона
Шаг 1
Для подключения градиента добавляем класс gradient на текст
Шаг 2
В конце страницы или футере добавляем код, через блок T123
HTML

<!--Анимация градиента на тексте
https://mt-webdesign.ru/text-gradient-->
<style>
.gradient .tn-atom {
animation: gradient 15s ease infinite;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: -moz-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: -webkit-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: -o-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: -ms-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>
Шаг 3
Прописываем желаемый цвет для градиента, через запятую

Более подробные настройки, возможности взаимодействия и подключение в видео

Инструкция с копированием шаблона к себе

Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (ID Шаблона), нажимаем кнопку «Выбрать»
Шаг 3