Смотрите обучающее видео на YouTube канале
Анимация градиента у текста
Вариант для статичного текста и стандартной анимации


<!--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>

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


<!--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>

Made on
Tilda