はじめに

先日、コーディングの仕事を進めていく中で、テキストをグラデーションで表示するケースがありました。

それまで、テキストをグラデーションで表示する事が無かったので、調べた内容を今回紹介しようと思います。

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

仕上がりイメージ

目次

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

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

HTML

<p class="tset01">祇園精舎の鐘の声諸行無常の響きあり</p>

CSS

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

できあがったもの

単色のテキストとグラデーションの背景ができあがりました。

次のSTEPで背景のグラデーションからテキスト部分のみ切り抜きを行います。

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

テキスト部分の背景を切り抜くにはbackground-clipを使用します。

background-clipというプロパティは、背景の要素を拡張させる範囲を指定する物です。background-clip:textとすることで、背景がテキストの範囲内のみ表示させることができます。

HTMLに変更は無いため割愛します。

CSS

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

できあがったもの

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

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

テキストを透明にする

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

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

CSS

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

できあがったもの

これでテキストの色をグラデーションにできました。

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