文字にグラデーションをかける方法

このページの目的

通常は単色で表示されるテキスト（文字）を、美しいグラデーションで彩るテクニックを学びます。
background-clip: textというプロパティを使い、文字の形で背景を切り抜く、という少し応用的な考え方がポイントです。

smart_display動作サンプル

実際に動作するサンプルです。テキストにグラデーションが適用されていることを確認してください。

このサンプルを実装するためのHTMLとCSSのコードは以下の通りです。

---

build実装方法

このテクニックは、以下の3つのCSSプロパティを組み合わせて実現します。

1. まず、backgroundプロパティで、通常通り要素の背景にグラデーションを指定します。
2. 次に、background-clip: text;で、その背景を「テキストの形」で切り抜きます。
3. 最後に、-webkit-text-fill-color: transparent;で、元々の文字色を透明にし、背景のグラデーションが見えるようにします。

実装コード例

<!-- HTML -->
<h1 class="gradient-text">Gradient Title</h1>

<!-- CSS -->
.gradient-text {
  /* 1. まずは背景としてグラデーションを指定 */
  background: linear-gradient(45deg, #f97316, #ec4899);
  
  /* 2. 背景をテキストの形で切り抜く（ベンダープレフィックスも忘れずに） */
  -webkit-background-clip: text;
          background-clip: text;
  
  /* 3. テキストの色を透明にする（-webkit-はSafariなど対応のため） */
  -webkit-text-fill-color: transparent;
}

---

warningよくある間違いと対策

グラデーションにならず、単色の文字が表示される

-webkit-text-fill-color: transparent;の指定が抜けている可能性が高いです。文字色が透明になっていないため、背景のグラデーションが隠れてしまっています。

何も表示されなくなってしまった

background-clip: text;は、一部の古いブラウザではサポートされていません。また、背景にグラデーションではなく単色を指定してしまうと、文字色も透明なため、結果として何も見えなくなってしまいます。

---

---