CSS Tips | 超実務コアCSSテクニック：ボックスモデル － background-clip:text

Web APP CSS
スポンサーリンク

background-clip:text を理解すると「文字にグラデーションを流し込む」表現ができる

background-clip: text は、CSS の中でも“映えるデザイン”を作るための強力なテクニックです。
文字そのものに背景（グラデーション・画像）をクリップして、文字が塗りつぶされるような表現を作れます。

Tailwind CSS でも簡単に実現できるので、初心者でもすぐに使えるように丁寧に解説します。

background-clip:text の基本

文字の形に背景を切り抜く

background-clip: text;
-webkit-background-clip: text; /* Safari対策 */
color: transparent;
CSS

この3つをセットで使うことで、
背景が文字の形にクリップされ、文字が透明になるという仕組みが完成します。

深掘り：なぜ color: transparent が必要なのか

文字の色が残っていると背景が見えません。
color: transparent にすることで、
背景が文字の形に“透けて見える”ようになります。

パターン1：文字にグラデーションを流し込む（最もよく使う）

CSS版

.text-gradient {
  background: linear-gradient(90deg, #06b6d4, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
CSS

HTML

<h2 class="text-gradient">グラデーション文字</h2>
HTML

Tailwind版

Tailwind では bg-clip-text と text-transparent を使います。

<h2 class="bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
  グラデーション文字
</h2>
HTML

ポイント

  • bg-clip-text → 文字に背景をクリップ
  • text-transparent → 文字色を透明に
  • bg-gradient-to-r ... → グラデーション背景

パターン2：画像を文字にクリップする（ロゴ風）

CSS版

.text-image {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
CSS

Tailwind版

<h1 class="bg-[url('/photo.jpg')] bg-cover bg-center bg-clip-text text-transparent">
  IMAGE TEXT
</h1>
HTML

特徴

  • 写真やテクスチャを文字に流し込める
  • ロゴやタイトルで映える

パターン3：太字 × グラデーションで“映える見出し”

CSS版

.title {
  font-weight: 800;
  font-size: 48px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
CSS

Tailwind版

<h1 class="text-5xl font-extrabold bg-gradient-to-br from-pink-500 to-violet-500 bg-clip-text text-transparent">
  Stylish Title
</h1>
HTML

太字の方が背景がよく見えるため、
グラデーション文字は太めのフォントと相性が抜群です。

パターン4：hover でグラデーション文字に変化させる

CSS版

.link {
  color: #333;
  transition: 0.3s;
}
.link:hover {
  background: linear-gradient(90deg, #06b6d4, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
CSS

Tailwind版

<a class="text-gray-700 transition
          hover:bg-gradient-to-r hover:from-cyan-400 hover:to-blue-500
          hover:bg-clip-text hover:text-transparent">
  ホバーで変化
</a>
HTML

特徴

  • 通常は普通の文字
  • hover するとグラデーション文字に変化
  • UI に動きが出る

background-clip:text の深掘りポイント

1. Safari では -webkit-background-clip: text が必須

Safari は標準の background-clip: text に対応していないため、
必ず -webkit- 付きも書きます。

Tailwind では自動で付かないため、
必要なら CSS を追加することもあります。

2. 文字色は必ず透明にする

color: transparent;
CSS

Tailwind では

text-transparent
HTML

これがないと背景が見えません。

3. 背景は「文字の外側」まで広がっていてOK

背景は文字の外側まで広がっていても問題ありません。
クリッピングされるのは“見える部分だけ”です。

4. グラデーションは太字の方が映える

細い文字だと背景が見えにくいため、
太字・大きめのフォントと組み合わせると効果が最大化します。

実践テンプレート：よく使う3パターン

グラデーション見出し

<h2 class="text-4xl font-bold bg-gradient-to-r from-indigo-500 to-pink-500 bg-clip-text text-transparent">
  Gradient Heading
</h2>
HTML

写真を使ったロゴ風タイトル

<h1 class="text-6xl font-extrabold bg-[url('/mountain.jpg')] bg-cover bg-center bg-clip-text text-transparent">
  MOUNTAIN
</h1>
HTML

hover でグラデーション化するリンク

<a class="text-gray-700 transition
          hover:bg-gradient-to-r hover:from-cyan-400 hover:to-blue-500
          hover:bg-clip-text hover:text-transparent">
  Hover Me
</a>
HTML

まとめ

background-clip:text は、文字に背景を流し込むための強力なテクニックです。

  • 文字にグラデーションを適用できる
  • 画像を文字にクリップできる
  • 太字と相性が良い
  • Safari では -webkit-background-clip が必要
  • Tailwind では bg-clip-text + text-transparent

スポンサーリンク
タイトルとURLをコピーしました