グラデーション文字の作り方｜background-clip:textとフォールバックを解説

サイトの見出しやロゴで、文字そのものに色のグラデーションがかかっているデザインを見たことはないでしょうか。一見すると画像で作っているように見えますが、実はCSSだけで実現できます。鍵になるのが background-clip: text というプロパティです。本記事では、グラデーション文字とは何か、どう作るのか、そして実務で気をつけたいブラウザ対応や可読性の注意点までを順を追って解説します。

グラデーション文字とは

グラデーション文字とは、文字の塗り（色）に単色ではなく複数の色のグラデーションを適用したテキストのことです。見出しのアクセントやブランドロゴ、ヒーローセクションのキャッチコピーなどでよく使われ、ページに華やかさや奥行きを与えます。

かつては画像として書き出すしかありませんでしたが、現在はCSSのbackground-clipを使って、テキストそのものを背景グラデーションで塗り抜く手法が主流です。CSSで作るメリットは大きく、文字を画像化しないため検索エンジンやスクリーンリーダーがテキストとして認識でき、拡大しても文字がぼやけず、文言の修正もHTMLを書き換えるだけで済みます。

実際にどんな配色や角度が映えるかは、グラデーション文字作成ツールでプレビューしながら試すのが分かりやすいでしょう。色を変えるたびに見え方がどう変わるかを体感できます。

作り方：background-clipとtext-fill-color

グラデーション文字の基本は、たった数行のCSSで完成します。考え方はシンプルで、要素に背景グラデーションを敷き、それを文字の形だけに切り抜き、文字本来の色を透明にして背景を透けさせるという3ステップです。

.gradient-text {
  background: linear-gradient(90deg, #ff6b6b, #4d96ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

それぞれの役割を整理します。

• background：文字に乗せたいグラデーションを指定します。ここが実際に見える色になります。
• background-clip: text：背景の描画範囲を「文字の形」に切り抜くプロパティです。これにより、文字以外の余白には背景が表示されなくなります。
• text-fill-color: transparent：文字の塗りを透明にし、後ろの背景グラデーションを透けさせます。-webkit-text-fill-colorはWebKit系の専用プロパティで、通常のcolorより優先されます。

ポイントは、-webkit-接頭辞付きと接頭辞なしの両方を書いておくことです。background-clip: textは長らくベンダー接頭辞が必要だった経緯があり、互換性のために両方を併記するのが安全です。また、-webkit-text-fill-colorに対応しない環境のために、フォールバックとして通常のcolorも指定しておきます。

linear-gradientの指定：角度と色

見た目を左右するのが、linear-gradient()の中身です。基本の書式は「角度（または方向）, 色1, 色2, …」という並びになります。

linear-gradient(90deg, #ff6b6b 0%, #ffd93d 50%, #4d96ff 100%)

各要素の意味は次のとおりです。

• 角度：90degなら左から右へ、0degなら下から上へ、45degなら斜めにグラデーションが流れます。to rightのようにキーワードで方向を書くこともできます。
• 色：2色以上を並べます。#ff6b6bのような16進数だけでなく、rgb()やhsl()でも指定できます。
• 色の位置（カラーストップ）：色のあとに0%や50%と書くと、その色が現れる位置を細かく制御できます。省略すると等間隔に配置されます。

色を3色以上にすると複雑で印象的なグラデーションになりますが、文字は面積が小さいため、2〜3色程度に抑えたほうが読みやすく整って見えることが多いです。隣り合う色は明度差をつけすぎず、近い系統でまとめると上品に仕上がります。配色の方向性に迷ったら、まずCSSグラデーション作成ツールでグラデーションそのものを作り、生成されたlinear-gradient()のコードを文字用にそのまま流用するのが効率的です。

ブラウザ対応とフォールバック

background-clip: textは、現在の主要ブラウザ（Chrome、Safari、Firefox、Edge）でおおむね利用できますが、多くの環境で今も-webkit-接頭辞が必要です。そのため、前述のように接頭辞付きと接頭辞なしを併記するのが基本です。

問題は、何らかの理由でこのプロパティが効かなかった場合です。もしcolor: transparentだけが適用され、背景の切り抜きが効かないと、文字が透明になって完全に読めなくなるという最悪のケースが起こり得ます。これを防ぐため、フォールバックを用意しておきましょう。

.gradient-text {
  color: #4d96ff; /* 非対応時に見える単色 */
  background: linear-gradient(90deg, #ff6b6b, #4d96ff);
  -webkit-background-clip: text;
  background-clip: text;
}

上の例では、まず読める単色をcolorに指定し、対応ブラウザでのみグラデーションが上書きされる形にしています。さらに堅牢にしたい場合は、@supportsを使って「background-clip: textに対応している場合のみ透明化する」と条件分岐させる方法もあります。

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text { -webkit-text-fill-color: transparent; }
}

こうしておけば、対応していない環境では単色のまま、対応している環境ではグラデーションで表示され、どの環境でも最低限「文字が読める」状態を保てます。フォールバックの単色には、グラデーションに使った色のうち背景とのコントラストが取れる色を選ぶとよいでしょう。

見出しでの使いどころ

グラデーション文字は目を引く反面、使いすぎるとうるさく、安っぽい印象になりがちです。効果的に使うコツは、ページの中で「ここぞ」という箇所に絞ることです。

• ヒーロー見出し（h1）やキャッチコピー：ファーストビューの主役に使い、ブランドの世界観を一目で伝える。
• ロゴやサービス名：固有名のアクセントとして、一貫した配色で使う。
• セクションの大見出し：本文との差をつけ、視線を誘導する。

逆に、本文や小さなテキスト、ボタンのラベルなどに広く使うのは避けたほうが無難です。文字が小さいとグラデーションの変化が見えづらく、ただ色がにじんで読みにくいだけになってしまいます。大きく、太いフォントほどグラデーションは映えるため、見出し用の大きな文字に限定するのが鉄則です。配色やフォントサイズの組み合わせを試すときは、グラデーション文字作成ツールで実際の見え方を確認してから採用すると失敗が減ります。

可読性の注意点

デザイン性と引き換えに、グラデーション文字は可読性とアクセシビリティを損ないやすい点に注意が必要です。最後に、押さえておきたいポイントをまとめます。

• 背景とのコントラスト：グラデーションは色が変化するため、一部分だけ背景に溶け込んで読みづらくなることがあります。グラデーション内のもっとも明るい色・暗い色の両方が、背景に対して十分なコントラストを保てているか確認しましょう。
• 色だけに意味を持たせない：色覚特性のある利用者には、意図した色の違いが伝わらないことがあります。グラデーションは装飾にとどめ、情報の区別を色だけに頼らないようにします。
• 小さな文字に使わない：前述のとおり、小さい文字ではグラデーションが読みにくさにつながります。本文には単色を使いましょう。
• 必ずフォールバックを用意する：非対応環境で文字が消えないよう、読める単色のcolorを必ず指定します。

グラデーション文字は、background-clip: textとグラデーション背景、そして文字色の透明化という仕組みを理解すれば、CSSだけで手軽に作れる表現です。まずはCSSグラデーション作成ツールでベースの配色を作り、グラデーション文字作成ツールで実際の文字での見え方とコードを確かめてみてください。仕組みを目で見て触れることが、理解とセンスを磨く近道です。

なお本記事は一般的な情報の提供を目的としたものです。CSSの仕様やブラウザの対応状況は時間とともに変化します。実装にあたっては、最新の公式ドキュメントや各ブラウザの対応状況を必ず確認したうえでご判断ください。