テキストのグラデーション

今ではテキストのグラデーションなどの素敵なトリックがあちこちで見られるようになりました...でも？それらがどのように作られるのか疑問に思ったことはありますか?今日は私が教えてあげましょう。

.text-gradient {
  background: linear-gradient(-25deg, #5662f6 0%, #7fffd4 100%);
  color: transparent;
  background-clip: text;
}

まずここをご覧ください。テキストの背景にグラデーションを与えています。次に、文字の色を透明にして見えないようにします。
その後、background-clip プロパティを使用して、背景の色がテキストの色に変更されるようにテキストを作成します。

さらに 4 つのトリックを知りたい場合は、下の画像をクリックしてください?