<h2 class="gr1"><span>Gradation Color</span></h2>

<h2 class="gr2"><span>Line Gradation Color</span></h2>

<h2 class="gr_anime"><span>Animation Gradation Color</span></h2>

h2.gr1{
  text-align:center;
  font-size:30px;
}
h2.gr1 span{
  background: -webkit-linear-gradient(left, #ff26fb, #00b3ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


h2.gr2{
  text-align:center;
  font-size:30px;
}
h2.gr2 span{
  background: -webkit-linear-gradient(#000000 50%, #ff0000 60% 60%, #000000 65% 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


h2.gr_anime{
  text-align:center;
  font-size:30px;
}
h2.gr_anime span{
  background: -webkit-linear-gradient( 60deg,#12d6df, #f70fff,#faea3d, #fd644f);
  background-size:400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textAnime 15s infinite;
}
@keyframes textAnime{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}