CSS
テキストに グラデーションをかけたり、背景画像で切り抜くCSS
2021年09月03日 9:00
こんにちは、社員Kです。
本日は、テキストにグラデーションをかけたり、背景画像をテキストの形で切り抜き（クリッピング）するCSSのご紹介です。
テキストにグラデーションをかけるCSS
テキストにグラデーションを適用したい場合は、「background: linear-gradient」「-webkit-background-clip: text」を指定するだけ。
下記のサンプルからHTMLとCSSをご確認ください。
background: linear-gradientのパラメータ部分の「-45deg」を変更するとグラデーションの向きを調整することができます。
テキストを背景画像で切り抜き（クリッピング）
背景画像の場合も基本的には同じで、背景に画像を指定して、文字色を透明にしてあげます。
下記の画像をサンプルとして使用します。
いかがでしたでしょうか？
簡単なコードでテキストにおしゃれなスタイルを適用することできます。
関連記事
この記事を書いた人
社員K
福岡でWebプログラマー・フロントエンドエンジニアとして10年目。まだまだ勉強することが沢山あるなぁと最近良く思います。日本語には自信があります。すぐに効くダイエット情報募集中！
