できない.dev

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 が欠けている
.grad-text {
  display: inline-block;
  margin: 0;
  font: 700 28px system-ui;
  background-image: linear-gradient(90deg, #6366f1, #ec4899);
  color: transparent;
}
できる例: background-clip: text と対で指定
.grad-text {
  display: inline-block;
  margin: 0;
  font: 700 28px system-ui;
  background-image: linear-gradient(90deg, #6366f1, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

接頭辞と対応状況

background-clip: text は長いあいだ WebKit の独自拡張として広まり、-webkit-background-clip: text の形で使われてきた。
接頭辞の無い形が主要ブラウザに出そろったのは比較的新しいため、いまは接頭辞付きと接頭辞なしを併記しておくのが安全である。

  • 書く順序は慣例どおり、接頭辞付きが先で、標準のプロパティを後に置く。
  • @supports の条件を or でつないでいるのは、どちらか一方しか解釈できないブラウザを取りこぼさないためである。

グラデーションは文字ではなく要素に敷かれる

background-clip は要素の背景をどこまで描くかを決めるプロパティであり、グラデーション自体は文字ではなくボックス全体に敷かれている。

見出しを block のまま置くと背景は行の端まで広がり、短い文字列では左端付近の色しか文字に乗らない。
display: inline-block でボックスを文字幅まで縮めると、グラデーションの端から端までがそのまま文字に収まる。

背景画像として扱われているので、角度や background-size を変えれば色の流れ方も調整できる。

できない例: block のまま（左端の色だけ）
.grad-text {
  margin: 0;
  font: 700 28px system-ui;
  background-image: linear-gradient(90deg, #6366f1, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
できる例: inline-block で文字幅に縮める
.grad-text {
  display: inline-block;
  margin: 0;
  font: 700 28px system-ui;
  background-image: linear-gradient(90deg, #6366f1, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}