CSSを使用してTEXTにグラデーションを適用します。

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

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

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

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

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

以上がCSSを使用してTEXTにグラデーションを適用します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。