グラデーションテキストとは

文字の背景にグラデーションを敷き、その部分だけを文字の形にくり抜いて見せる CSS の装飾テクニック。

概要

見出しなどの文字に、単色ではなくグラデーションの色をつける装飾テクニックです。文字の背景としてグラデーションを敷いたうえで、background-clip: text と color: transparent を使って文字の形の部分だけグラデーションが見えるようにくり抜くことで実現します。

別名

表記ゆれ：グラデーションテキスト、グラデ文字、background-clip: text

実装に使う CSS プロパティ名（background-clip: text）で呼ばれることもあります。

AI への伝え方

「見出しをグラデーションの文字にして」で伝わります。 background-clip: text は Safari では -webkit-background-clip: text の接頭辞が必要な環境があるため、「ベンダー接頭辞も付けて」と伝えると安全です。対応していない環境向けに、文字色のフォールバックを入れておくとより丁寧です。

似たパーツとの違い

「グラデーション」は背景やボタンなど面全体に色のグラデーションをかける技法全般を指し、グラデーションテキストはその適用先を文字だけに絞ったものです。

デモ

2 色のグラデーション見出し

3 色のグラデーション見出し

コード

HTML

<div class="gradtext-demo">
  <h3 class="gradtext-demo__heading gradtext-demo__heading--two">2 色のグラデーション見出し</h3>
  <h3 class="gradtext-demo__heading gradtext-demo__heading--three">3 色のグラデーション見出し</h3>
</div>

CSS

.gradtext-demo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  background: #ffffff;
  font-family: sans-serif;
}

.gradtext-demo__heading {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  /* グラデーションを文字の背景として敷く */
  background-repeat: no-repeat;
  /* 背景を文字の形だけにくり抜く(ベンダー接頭辞も併記) */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gradtext-demo__heading--two {
  background-image: linear-gradient(90deg, #0017c1, #4dd0e1);
}

.gradtext-demo__heading--three {
  background-image: linear-gradient(90deg, #ff7ab8, #7a7aff, #4dd0e1);
}