文字にグラデーションを付ける際の制作メモです。
CSSで実装しています。

HTML

<h2><span class="gradation">文字にグラデーション</span></h2>

CSS

span.gradation {
    background: -webkit-linear-gradient( 90deg,  #ccc 35%, #000 100% );/* 下から上にグラデーション */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }

「span」で囲むことで文字のみにグラデーションをかけています。
囲まない場合、横幅いっぱいにグラデーションがかかってしまい
上手く色が反映されなかったりします。
何か事情があり「span」で囲みたくない場合は、「h2」に「display: inline-block;」を入れるようにするといいと思います。
「background」で色設定、「-webkit-background-clip: text;」で文字の型抜き、
「-webkit-text-fill-color: transparent;」で型抜きの文字を透明にしています。

<h2><span class="gradation2">2色グラデーション</span></h2>

CSS

span.gradation2 {
      background: -webkit-linear-gradient( 0deg, #4169e1 0, #90CAF9 100% );/* 2色グラデーション */
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      }

「background: -webkit-linear-gradient〜」にすると
方向設定の「deg」が「0deg」の場合、横方向のグラデーション
「90deg」の場合、縦方向のグラデーションとなり、
背景色のグラデーション設定をする際の「background: linear-gradient〜」とは
方向設定が異なるので気をつけないとですね。

HTML

<h2><span class="gradation3">3色グラデーション</span></h2>

CSS

span.gradation3 {
        background: -webkit-linear-gradient( 0deg, #4169e1 0, #da70d6 50% ,#f08080 100%);/* 3色グラデーション */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        }

「background: -webkit-linear-gradient〜」のところの色設定を3つにしています。
ここを、「 background: -webkit-linear-gradient( 0deg, #4169e1 0 35%, #da70d6 35% 70% ,#f08080 70% 100%);」などにすると
色の境目がパキッとしたグラデーションになります。

HTML

<h2><span class="gradation4">色変化グラデーション</span></h2>

CSS

span.gradation4 {
          background: -webkit-linear-gradient( 0deg, #4169e1 0 ,#f08080 100%);/* 色変化グラデーション */
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-size: 200% auto;
          animation: flow 5s infinite alternate;
          }

          @keyframes flow {
            from {background-position: 0}
            to {background-position: 100%}
          }

じわじわと文字の色が変化します。
「background-size」でサイズを拡大して、その位置を動かすことで色を変化させています。
「infinite」でループ、「alternate」で再生方向を反転させていて、
「左→右」と移動した後「右→左」と移動、それが繰り返されるよう設定しています。