background-clip: textを利用してグラデーションのテキストを表示します。
デモページはこちら

以下のhtml構造で確認します。グラデーションのテキストはbackground: linear-gradient()、background-clip: text、-webkit-text-fill-color: transparentを適用して実現するため、確認のため段階的に表示します。

<p class="title">background: linear-gradient()のみ適用</p>
<p class="text">abcdefghi</p>
<p class="text">jklmnopqrstuvwxyz</p>

<p class="title">background-clip: textを適用</p>
<p class="text style01">abcdefghi</p>
<p class="text style01">jklmnopqrstuvwxyz</p>

<p class="title">-webkit-text-fill-color: transparentを適用</p>
<p class="text style01 style02">abcdefghi</p>
<p class="text style01 style02">jklmnopqrstuvwxyz</p>

CSSは以下になります。background-clip: textはベンダープレフィックス有りと無しを、-webkit-text-fill-color: transparentはベンダープレフィックス有りを適用しています。

表示を確認するとbackground-clip: textで背景をテキストの形に切り取り、-webkit-text-fill-color: transparentでテキストを透明にしてグラデーションの背景を表示させているがわかります。

.text {
  font-size: 5rem;
  font-weight: 700;
  width: fit-content;
  margin: 0 auto;
  padding: 0 5px;
  background: linear-gradient(90deg, #0016A7 0, #007FF9 100%);
}
.style01 {
  background-clip: text;
  -webkit-background-clip: text;
}
.style02 {
  -webkit-text-fill-color: transparent;
}
.text:not(:first-child) {
  margin-top: 20px;
}