πŸ’₯Animated Changing Text Color

Step 1: Create a simple Div.

  <div id="Toastify-Greeting">Animated Color</div>

Step 2: Adding the CSS

#Toastify-Greeting {
    font-size: 5rem;
    font-weight: 700;
    font-family: bebas neue;
    background: linear-gradient(45deg, #ccee52, #f176ba, #d2d8da, #23d5ab);
    background-size: 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animate 5s ease-in-out infinite;
    text-align: center;
    line-height: 0.9;
}

@keyframes animate {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

Last updated