レインボーのタイトル

<div class="wrap">
  <h2 class="title title--red">グラデーションのタイトル</h2>

  <h2 class="title title--orange">グラデーションのタイトル</h2>

  <h2 class="title title--green">グラデーションのタイトル</h2>

  <h2 class="title title--blue">グラデーションのタイトル</h2>

  <h2 class="title title--black">グラデーションのタイトル</h2>
</div>

.wrap {
  text-align: center;
}
.title {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.title--red {
      background-image: -webkit-gradient(linear, left top, right top, from(#faa3ac), to(#89216B));
    background-image: linear-gradient(90deg, #faa3ac, #89216B);
}
.title--orange {
        background-image: -webkit-gradient(linear, left top, right top, from(#ffd46a), to(#ff7e01));
    background-image: linear-gradient(90deg, #ffd46a, #ff7e01);
  padding-left : 30px;
}
.title--green {
        background-image: -webkit-gradient(linear, left top, right top, from(#a9f680), to(#1bb801));
    background-image: linear-gradient(90deg, #a9f680, #1bb801);
  padding-left : 60px;
}
.title--blue {
        background-image: -webkit-gradient(linear, left top, right top, from(#00d4ff), to(#090979));
    background-image: linear-gradient(90deg, #00d4ff, #090979);
  padding-left : 90px;
}
.title--black {
        background-image: -webkit-gradient(linear, left top, right top, from(#F5F5F5), to(#222));
    background-image: linear-gradient(90deg, #F5F5F5, #222);
  padding-left : 120px;
}