テキストに グラデーションをかけたり、背景画像で切り抜くCSS

こんにちは、社員Kです。

本日は、テキストにグラデーションをかけたり、背景画像をテキストの形で切り抜き（クリッピング）するCSSのご紹介です。

テキストにグラデーションをかけるCSS

テキストにグラデーションを適用したい場合は、「background: linear-gradient」「-webkit-background-clip: text」を指定するだけ。

下記のサンプルからHTMLとCSSをご確認ください。

background: linear-gradientのパラメータ部分の「-45deg」を変更するとグラデーションの向きを調整することができます。

テキストを背景画像で切り抜き（クリッピング）

背景画像の場合も基本的には同じで、背景に画像を指定して、文字色を透明にしてあげます。

下記の画像をサンプルとして使用します。

いかがでしたでしょうか？

簡単なコードでテキストにおしゃれなスタイルを適用することできます。