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

background-clip: text

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

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

概要

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

対応ブラウザ

デスクトップ

Chrome 120+
Edge 120+
Safari 14+
Firefox 未対応

モバイル

Chrome Android 120+
Safari iOS 14+
Firefox Android 未対応

基本構文

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

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク