Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

background-clip: text

背景画像やグラデーションをテキストの形でマスクすることで、グラデーションテキストや画像テキストといったリッチな表現が可能です。SNSやランディングページの見出しなどで印象的なタイポグラフィを作成できます。-webkit-text-fill-color: transparent と組み合わせて使用するのが一般的です。

テキスト効果クリッピング

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.background-clip.text
120
120
49
14
120
14
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (120)
実装メモ
  • 「text」値は「-webkit-background-clip」でのみサポートされています（「background-clip」ではサポートされていません。バグ 40229927 を参照）。
注釈 6件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (120)
  • このバージョンで機能が削除されました (79)
  • このバージョンで機能が削除されました (15)
実装メモ
  • 「text」値は「-webkit-background-clip」でのみサポートされています（「background-clip」ではサポートされていません。バグ 40229927 を参照）。
対応条件
  • Edge 15 より前では、この値はプロパティのプレフィックス付きバージョンでのみサポートされていました。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 「background-attachment:fixed」 (バグ 1313757)、他の値を持つマルチレイヤー背景 (バグ 1481498)、およびその他の特殊なケース (バグ 1656784 を参照) では機能しません。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (14)
実装メモ
  • 「text」値は「-webkit-background-clip」でのみサポートされます（「background-clip」ではサポートされません）。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (120)
実装メモ
  • 「text」値は「-webkit-background-clip」でのみサポートされています（「background-clip」ではサポートされていません。バグ 40229927 を参照）。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (14)
実装メモ
  • 「text」値は「-webkit-background-clip」でのみサポートされます（「background-clip」ではサポートされません）。

基本構文

CSS 
.gradient-text {
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

ライブデモ

Gradient text

CSS Gradientcharacter demo.

プレビュー全画面表示

imagetekscha

CSS imagetekscha demo.

プレビュー全画面表示

animation

CSS animation demo.

プレビュー全画面表示

実務での使いどころ

  • グラデーションテキストの作成

    見出しやヒーローテキストにグラデーションを適用し、視覚的にインパクトのあるタイポグラフィを実現できます。

注意点

  • Firefoxでは標準プロパティとしての background-clip: text は未サポートです。-webkit-background-clip: text をベンダープレフィックス付きで併記してください。

アクセシビリティ

  • color: transparent を使用するため、背景画像が読み込まれないとテキストが見えなくなります。フォールバックの文字色を必ず設定してください。

参考リンク