Text Color Animation

Home / Web Code Snippet / Text Color Animation

Text Color Animation

https://youtube.com/shorts/jE1Z52j1W24?si=_uklfZ0h__ZFw99V

HTML CODE:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
  <h2>Saksham Digital</h2>
</body>
</html>

CSS CODE:-

body{
    padding: 0px;
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: black;
}
h2{
    font-size: 80px;
    display: inline-block;
    color: white;
    background-clip: text;
    background-size: 200% auto;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    background-image: linear-gradient(-200deg,#fa0217 0%,#faf207 30%,
    #f0056f 60%,#160af7 100%);
    animation: animate 2s linear infinite;
}
@keyframes animate{
    to{
        background-position: 200% center;
    }
}