CSSだけで文字グラデーション

文字グラデーションも枠線同様に画像かSVGじゃなきゃ表現できないと思ったけどCSSだけで表現できるみたいなんだ。

今回は、文字グラデーションをCSSだけで実装する方法のご紹介です。
下のコードをCSSに貼り付ければすぐにテキストグラデーションが可能です。

.text {
  color: #8027f4;
  background: linear-gradient(to right, #02d3bb, #8027f4);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

このCSSコードを使うと下のようなグラデーションの文字ができます。