<h1>Gradient text</h1>
body {
  text-align: center;
} 
h1 {
      display: inline-block;
      font: bold 4.5em/1.5 Bebas, sans-serif;
      color: #5CA17C; /*non-webkit fallback*/
      font-size: 72px;
      text-transform: uppercase;
       background-image: linear-gradient(to bottom, #26BDA6, #FF9F65, #DED37E, #26BDA6);
      background-size: auto 250%;
      transition: background-position 0.5s;
        -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      line-height: 200px;
      background-position: 0 100%;
 }
 h1:hover {
      background-position: 0 0;
      cursor: pointer;
 }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.