CSSでテキストにグラデーションカラーを追加する方法とよくある失敗の直し方

この記事では、CSSを使ってテキスト要素に線形グラデーションの色を追加する方法と、初心者が陥りやすいグラデーションの失敗を避けるためのコツをわかりやすく解説します。

HTMLのテキスト要素にグラデーションカラーを適用するには、次の3つのCSSプロパティを使用します。

• background
• -webkit-background-clip
• -webkit-text-fill-color

「なぜテキストの色付けにbackgroundプロパティを使うのか?」と疑問に思うかもしれません。確かに少しトリッキーな手法に見えますが、実際にきちんと機能します。順を追って見ていきましょう。

ここでは例として、オレンジ(#ff8a00)とレッド(#dd4c4f)の2色を使い、テキスト要素に左から右への線形グラデーションを適用してみます。

HTML

text-gradientというクラス属性を持つ<h2>見出し要素を用意します。

<h2 class="text-gradient">Gradient text color!</h2>

CSS

.text-gradientクラスにグラデーションのスタイルを追加します。

.text-gradient {
  /* 背景色を設定 */
  background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 100%);
  /* 色をテキスト部分だけにマスクし、それ以外は非表示にする */
  -webkit-background-clip: text;
  /* テキストの塗りつぶし色を透明にして、マスクした背景色を見えるようにする */
  -webkit-text-fill-color: transparent;
}

実行結果:

Gradient text color!

うまく表示されましたね!

でも、ちょっと待ってください!

よく見ると、2つの色がテキスト要素に均等に適用されていないことに気づきますか?

linear-gradient関数には、次の2つの色の値を指定しています。

• #ff8a00(オレンジ)
• #DD4C4F(レッド)

CSSでは0%から100%まで均等に広がるように指定しているので、本来なら2色が半々に表示されるはずです。ところが、実際の表示例はほぼすべてオレンジ色になっています。

ヒント:サイトのカラーテーマをダークモードに切り替えると、この違いがより分かりやすくなります。

この現象が起こる理由は、<h2>見出し要素がデフォルトでブロックレベル要素だからです。ブロックレベル要素の背景は、親コンテナの横幅いっぱい全体に広がります。

そのため、<h2>要素に追加したグラデーションクラス(.text-gradient)の色が、backgroundプロパティを対象にしている関係上、テキストの幅を超えて引き伸ばされてしまうのです。

分かりやすくするために、テキスト例に枠線を追加してみます。

Gradient text color!

どうですか?グラデーションがテキストの範囲を超えて広がっているのが確認できますね。

テキストグラデーションは、背景ではなくテキストそのものに設定すべきものです(ただし、このテクニックを実現するにはbackgroundプロパティを使う必要があります)。

これを修正するには、<h2>要素のデフォルトのdisplay:block設定を上書きして、代わりにinline-blockを指定します。

.text-gradient {
  background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

修正後の結果:

Gradient text color!

完璧です!違いが分かりますか?今度は2色のグラデーションのうち赤い部分もオレンジと同じようにしっかり表示されています。これは2色が50対50で均等に適用されるようになったからです。

ブラウザの互換性

このグラデーションテキストのテクニックは、WebKit系ブラウザでのみサポートされています。その他のブラウザ向けには、通常のCSS colorプロパティをフォールバックとして使用し、グラデーションに近い単一の色を指定しておくのがおすすめです。