gradient color letters -webkit only

.css

@supports (-webkit-background-clip: text) {
  .letter {
    background-image: linear-gradient(170deg, rgba(234, 234, 234, 0) 15%, rgba(234, 234, 234, 0.4) 22%, rgba(194, 73, 119, 0.9) 45%, #c24977 100%);
    -webkit-background-clip: text;
    background-clip: text;
    background-position: center -250%;
    color: transparent
  }
  .letter.-animate{
     background-position: 0% 150%;
  }
}