CreaTools LogoCreaTools
Tech Notes
Gradient Maker

CSSグラデーション文字｜background-clip: textの実装と注意点

2025-10-08

:::note ※文字にグラデーションをかけたいときの「演出用」記事です :::

結論（30秒で分かる要点）

  • 実装方法：background-clip: text + color: transparent の組み合わせ
  • 必須対応：-webkit-background-clip と -webkit-text-fill-color は省略不可
  • 迷ったら：Gradient Maker のテキストプレビューで確認

💡 グラデーションの色を決めたい → Gradient Maker でテキストプレビュー

よくある失敗（実務で踏む地雷）

❌ 失敗1：-webkit- プレフィックスを省略

/* ❌ Safari で真っ黒になる */
.gradient-text {
  background: linear-gradient(90deg, #667eea, #764ba2);
  background-clip: text;
  color: transparent;
}

/* ✅ -webkit- を追加 */
.gradient-text {
  background: linear-gradient(90deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

2025年現在も Safari 対応には -webkit- が必須。

❌ 失敗2：color: transparent を忘れる

/* ❌ グラデーションが見えない */
.gradient-text {
  background: linear-gradient(90deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  background-clip: text;
  /* color が設定されていない */
}

color: transparent がないと、テキスト色がグラデーションを覆う。

❌ 失敗3：インライン要素でグラデーションが途切れる

/* ❌ span で途切れることがある */
span.gradient-text {
  background: linear-gradient(90deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ✅ inline-block を追加 */
span.gradient-text {
  display: inline-block;
  /* ... 以下同様 */
}

❌ 失敗4：印刷時にテキストが消える

/* 印刷用フォールバックを追加 */
@media print {
  .gradient-text {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
    color: #667eea; /* フォールバック色 */
  }
}

❌ 失敗5：薄いフォントでグラデーションが見えにくい

細いフォント（font-weight: 300 以下）ではグラデーションの効果が弱くなる。

推奨：font-weight: 600 以上、または太めのフォントファミリー。

基本の実装

.gradient-text {
  background: linear-gradient(90deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

必要なプロパティ：

  1. background - グラデーション定義
  2. -webkit-background-clip: text - Safari対応
  3. background-clip: text - 標準プロパティ
  4. -webkit-text-fill-color: transparent - Safari対応
  5. color: transparent - フォールバック

フォールバック付きの実装

CSS無効時やグラデーション非対応環境（ほぼない）のため、必ず color を先に指定：

.gradient-text {
  color: #667eea; /* フォールバック（先に書く） */
  background: linear-gradient(90deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

具体例：このUIならこの設定

ケース1：ヒーローの見出し

.hero-title {
  font-size: 3rem;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

→ Generatorでグラデーションを調整

ケース2：アニメーション付きグラデーション

.animated-gradient-text {
  background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradient-shift 3s linear infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

ケース3：ホバーで色が変わる

.hover-gradient-text {
  color: #667eea; /* 初期状態 */
  background: linear-gradient(90deg, #f093fb, #f5576c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: #667eea;
  transition: -webkit-text-fill-color 0.3s;
}

.hover-gradient-text:hover {
  -webkit-text-fill-color: transparent;
}

ケース4：Tailwindでの実装

<span class="bg-gradient-to-r from-indigo-500 to-purple-500 bg-clip-text text-transparent">
  Gradient Text
</span>

任意のグラデーション：

<span class="bg-[linear-gradient(90deg,_#667eea,_#764ba2)] bg-clip-text text-transparent">
  Gradient Text
</span>

アクセシビリティの注意点

コントラスト比

グラデーション文字は色が変化するため、最も薄い部分でもコントラスト比を確保する必要がある。

用途最低コントラスト比（WCAG AA）
本文テキスト4.5:1
大きな文字（18px以上太字）3:1

対策：見出しやアクセント用途に限定し、本文には使わない。

スクリーンリーダー

background-clip: text はスクリーンリーダーに影響しない。テキスト内容は正常に読み上げられる。

ブラウザ対応

ブラウザ対応状況備考
Chrome✅全機能対応
Safari⚠️-webkit- プレフィックス必須
Firefox✅全機能対応
Edge✅全機能対応

重要：Safari対応のため -webkit-background-clip と -webkit-text-fill-color は省略不可。

まとめ：判断基準

条件推奨アプローチ
グラデーションの色選びGradient Maker でテキストプレビュー
Safari対応-webkit- プレフィックス必須
インライン要素display: inline-block を追加
印刷対応@media print でフォールバック
細いフォントfont-weight: 600 以上を推奨

この記事で解決しない場合