:root { --animated-title-color-1: #6666ff; --animated-title-color-2: #0099ff; --animated-title-color-3: #ffff00; --animated-title-color-4: #ff3399; } @keyframes animated_title_animation { 0%,100% { background-position: 0 0; } 50% { background-position: 100% 0; } } .animated-title { .text { //background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff); background: linear-gradient(to right, var(--animated-title-color-1), var(--animated-title-color-2) , var(--animated-title-color-3), var(--animated-title-color-4)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: animated_title_animation 60s ease-in-out infinite; background-size: 400% 100%; } }