How to Create a Multicolor Text in HTML and CSS

Source Code: (back to article)

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Linear Gradient</title>
  </head>
  <body>
    <style>
      h1 {
        font-size: 10vw; /* make our h1 tag larger */
        font-family: sans-serif; /* choosing our font */
        background: linear-gradient(to right, rgba(255, 215, 255, 0) 0%, rgba(225, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 61%), linear-gradient(rgb(97, 183, 217) 52%, rgb(224, 246, 255) 60%, rgb(78, 99, 132) 61%); /* you can change the colors based on your preference */
        background-clip: text; /*it defines how far the background should extend within an element, here we set it to text */
        -webkit-background-clip: text; /*for browsers compatibility */
        -webkit-text-fill-color: transparent; /* specifies the fill color of text characters. We use transparent to use the background as our text fill  */
        animation: wave 2000ms ease alternate infinite;
        transition: all 0.4s ease;
      }
      @keyframes wave {
        0% {
          background-position: 0 0;
        }
        100% {
          background-position: 50vw 10px;
        }
      }
    </style>
    <h1>W3DOCS</h1>
  </body>
</html>