CSSで文字にグラデーションをかけるには
背景に敷いた linear-gradient を background-clip: text で文字の形に切り抜き、グラデーションで塗られた見出しを作る基本形を示す。
画像に置き換えないので、文字は選択もコピーも検索もできるままである。
実行確認済みは、ブラウザで実際に描画して見た目を確認したものである。
公開:
<h2 class="grad-text">グラデーションの見出し</h2>.grad-text {
margin: 0;
/* 切り抜きが効かない環境向けのフォールバック。先に単色を置いておく */
color: #6366f1;
font-family: system-ui;
font-size: 32px;
font-weight: 700;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
.grad-text {
/* 背景は要素のボックスに敷かれるので、文字幅まで縮めておく */
display: inline-block;
background-image: linear-gradient(90deg, #6366f1, #ec4899);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
}background-clip: text は要素の背景を文字の形に切り抜いて描くプロパティで、文字自身を透明にすることで背後のグラデーションを文字色として見せている。
画像や SVG に置き換えずに済むため、文字は本文として選択・コピー・検索でき、スクリーンリーダーからも読み上げられる。
つまずき
文字が丸ごと消えてしまうときは、color: transparent だけが効いて background-clip: text が効いていないと考えるとよい。
この 2 つは必ず対で指定するもので、片方が欠けると塗るべき背景の無い透明な文字だけが残る。
切り抜きに対応していないブラウザでも同じ状態になるため、上の例では先に単色の color を書き、@supports で対応を確認できたときだけ透明化している。
こうしておけば、効かない環境でも見出しが読めなくなることはない。
接頭辞と対応状況
background-clip: text は長いあいだ WebKit の独自拡張として広まり、-webkit-background-clip: text の形で使われてきた。
接頭辞の無い background-clip: text が主要ブラウザに出そろったのは比較的新しいため、いまは接頭辞付きと接頭辞なしを併記しておくのが安全である。
書く順序は慣例どおり接頭辞付きが先で、標準のプロパティを後に置く。
@supports の条件を or でつないでいるのも、どちらか一方しか解釈できないブラウザを取りこぼさないためである。
グラデーションは文字ではなく要素に敷かれる
background-clip はあくまで要素の背景をどこまで描くかを決めるプロパティであり、グラデーション自体は文字ではなくボックス全体に敷かれている。
そのため見出しを block のまま置くと背景は行の端まで広がり、短い文字列では左端付近の色しか文字に乗らず、指定した色の変化が見えにくい。
display: inline-block を与えてボックスを文字幅まで縮めると、グラデーションの端から端までがそのまま文字に収まる。
背景画像として扱われている以上、角度や background-size を変えれば色の流れ方も調整できる。