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

Модификаторы

Модификация позволяет анимировать градиент на любом тексте всего в несколько кликов. Такая ненавязчивая анимация сможет освежить заголовки на вашем сайте и задать настроение проекту.

Описание

Посмотреть пример

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

Для начала добавляем стили в блок T123 и прописываем желаемый цвет для градиента, через запятую: rgb(238 119 82), rgb(231 60 126) и тд на свой

Шаг 1


<style>
    .gradient .tn-atom {
    animation: gradient 15s ease infinite;
    background: linear-gradient(-45deg, rgb(238 119 82), rgb(231 60 126), rgb(35 166 213), rgb(35 213 171));
	background: -moz-linear-gradient(-45deg, rgb(238 119 82), rgb(231 60 126), rgb(35 166 213), rgb(35 213 171));
    background: -webkit-linear-gradient(-45deg, rgb(238 119 82), rgb(231 60 126), rgb(35 166 213), rgb(35 213 171));
    background: -o-linear-gradient(-45deg, rgb(238 119 82), rgb(231 60 126), rgb(35 166 213), rgb(35 213 171));
    background: -ms-linear-gradient(-45deg, rgb(238 119 82), rgb(231 60 126), rgb(35 166 213), rgb(35 213 171));
    background: linear-gradient(-45deg, rgb(238 119 82), rgb(231 60 126), rgb(35 166 213), rgb(35 213 171));
    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>