【背景を文字の形に切り取る】background-clip: text;の使い方【CSSプロパティ】

今回は背景の画像や色を文字の形に切り取ることができるCSSプロパティ、
background-clip: textの使いかたをまとめてみたいと思います。

サンプルデモを2つ用意しました。

1つ目は3色のグラデーションで切り取られているもの、
2つ目は海の画像で切り取られたものになっています。

【サンプル1】

See the Pen
abdZONq by notebook (@orange-notebook)
on CodePen.

【サンプル2】

See the Pen
wvMWqpR by notebook (@orange-notebook)
on CodePen.

それでは使い方についてみていきましょう。

クリックできる目次

background-clip: text;の指定方法

背景を文字の形に切り取るためには、下記のCSSプロパティが必要です。

background-clip: text;
-webkit-background-clip: text;
color: transparent;
background: 色や画像を設定

サンプルも指定方法の通りではありますが、適用方法を少しみていきたいと思います。

HTMLはどちらのサンプルも、h2タグで「Background-clip!」のみです。

<h2>Background-clip!</h2>

どちらのサンプルも下記3つのプロパティは共通で、
backgroundプロパティだけ変えています。

background-clip: text;
-webkit-background-clip: text;
color: transparent;

1つ目のサンプルでは、背景をピンク、紫、青3色のグラデーションにしているので、
background: linear-gradient(to right, palevioletred, magenda, mediumblue);
としています。

2つ目のサンプルでは、背景を海の画像にしているので、
background: url(“画像のURL”); と指定しています。

今回のデモでは文字サイズが小さめになっていますが、
大きなフォントにすると、それだけ背景の画像や色が見える面積が増えるので
印象的な文字にすることができそうですね。

またGoogle Fontsなどで飾り文字にしても雰囲気が出そうです。

以上、簡単ではありますがbackground-clip: text; の使いかたでした。