3STEPでテキストをグラデーションで表示するCSS設定

2020年5月9日

先日、コーディングの仕事を進めていく中で、テキストをグラデーションで表示する必要がありました。
(下のような感じですね)

祇園精舎の鐘の声諸行無常の響きあり

背景をグラデーションにする方法とは少し異なりましたので、備忘録を兼ねて紹介します。

なお、この方法はIEでは使用できません。

グラデーション背景とテキストを設置

まずは、「背景画像としてのグラデーション」と「グラデーションにしたいテキスト」を配置します。

祇園精舎の鐘の声諸行無常の響きあり

HTML

便宜上<div>を使用していますが、特に必要ありません。

<div>
	<p>祇園精舎の鐘の声諸行無常の響きあり</p>
</div>

CSS

p {
	background:linear-gradient(to right,#e32443, #bfe1e0, #c09e71);
	font-size:26px;
	color:#fff; //テキストが見えやすいように白くしています
}

もちろんこのままだと「ベタのテキストとグラデーションの背景」ですので、次のSTEPで背景からテキスト部分のみ切り抜きます。

テキスト部分の背景を切り抜く

テキスト部分の背景を切り抜くにはbackground-clipを使用します。
background-clipというプロパティは、背景の要素を拡張させる範囲を指定することができます。

background-clip:textとすることで、背景がテキストの範囲内のみ表示させることができます。

実際にbackground-clip: textを設定してみると分かるのですが、背景画像はテキストに沿って切り抜かれたものの、テキスト自体に色が設定されているため、背景がテキストに隠れて非常に見えにくい感じになります。

CSS

p {
	background:linear-gradient(to right,#e32443, #bfe1e0, #c09e71);
	font-size:20px;
	-webkit-background-clip: text;
}

祇園精舎の鐘の声諸行無常の響きあり

そこで、次のSTEPでテキストを透明にして、背景画像のみが表示されるようにします。

テキストを透明にする

テキストを透明にするタグはcolor: transparent;です。

これによって、テキストの背景で隠されていたグラデーション部分のみが表示されるわけです。

CSS

p {
	background:linear-gradient(to right,#e32443, #bfe1e0, #c09e71);
	font-size:26px;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

できあがったもの

祇園精舎の鐘の声諸行無常の響きあり

という訳で、テキストをグラデーションにできました。

background-clip:textで背景をテキスト型に切り抜けますので、グラデーション以外にも、画像をテキストに沿って切り抜くという事もできます。