CSSには使用頻度が高いものがある反面「こんなものいつ使うの？」といったプロパティが数多く存在します。

せっかく覚えても実際に使う機会がないと忘れてしまうし、覚える意味自体感じられません。

「background-clip」も実際に使うケースが少ないマイナーなプロパティかと思いますが、「background-clip:text;」を使ったグラデーション文字だけはいつか使う機会があるのではないかな、と思ったのでご紹介します。

そもそも「background-clip」とはなんぞや

background-clipは背景色や背景画像の表示をどこまで拡張させるかのプロパティです。

background-clip: border-box;

background-clip: padding-box;

background-clip: content-box;

background-clip: text;

上記のように背景を表示させる範囲をborderの下、borderの手前、文字に重なる所のみといった感じに調整することが出来ます。

上記の例で一番面白い結果になったのはやはり、「background-clip: text;」でしょう。画像を使わずにグラデーションや模様のついた文字を作成することが出来るのでグラデーション文字を自動生成するコンテンツが作れます。ウェブフォントとの相性も良さそうですね。

ちなみに、今現在「background-clip」の前に「-webkit-」を付けないとgoogle chromeでは再現されないのでご注意を。