[CSS]background-clip:textで背景画像をテキストでくり抜く

background-clip:textを使って背景画像をテキストでくり抜く方法を紹介します。

実現したいこと

background-clip:textを利用すれば画像や背景色をを文字でマスクできるようになります。

今回、グラディアントカラーの背景色をテキストでマスクする方法を紹介していきます。

ポイントは二つです。

1. background-clip:textで画像(もしくは背景色)をマスクする
2. color:transparentで文字のフォントカラーを透明にする(これにより背景色が浮かび上がってくるような感じ)

背景色はlinerar-gradiantで実装します。今回、文字でマスクされていますが左から右に向けてグラディアントカラーを指定しています。

参考:

CSSのlinear-gradientの使い方。degの意味や半透明にする方法も紹介