CSSのbackground-clipでテキストをグラデーションに

CSSのbackground-clipでテキストをグラデーション加工することができます。
本来は「background-clip」プロパティは、要素の背景がcolor又はimageの時、境界の下まで拡張するかどうかを指定するものです。
ところが、この値には「text」があり、この値を設定するとテキストに背景色や背景画像をクリッピングすることができます。

テキストをグラデーションにする例

サンプル

「background-clip」プロパティを使ってテキストにグラデーションをつけるには、「background-clip」プロパティの値を「text」にします。
次に、colorの値をtransparent（透明）にするのがポイントです。

結局、背景のグラデーションがクリッピングマスクされて透明な文字の部分に表示される仕掛けです。

background-image: linear-gradient(#1FE0C6,#DB4EC1);
background-clip: text;
-webkit-background-clip: text;
color: transparent;