背景クリッププロパティ

最終更新：2026-09-13

background-clip 背景クリッププロパティ

background-clip は背景の塗りつぶし領域を制御し、背景（色または画像）がどのボックスモデルの領域に表示されるかを決めます。デフォルトの border-box は背景をボーダーの下まで広げ、padding-box はパディング領域にクリップし、content-box はコンテンツ領域のみに表示します。CSS3 では、テキストクリップ効果のための text 値も追加されました。

カテゴリ
初期値	border-box
継承	いいえ
適用対象	all
アニメーションタイプ	discrete
CSS バージョン	CSS3
状態	標準

📝 構文

background-clip: border-box | padding-box | content-box | text;

⚙️ 値

値	タイプ	説明
`border-box \| padding-box \| content-box \| text`	キーワード	背景の塗りつぶし領域

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
background-clip	✓ v4	✓ v12	✓ v4	✓ v3.1	✓ v10
すべての主要ブラウザーでサポート

ヒント： border-box と padding-box の違いは、透明なボーダーや破線のボーダーを使うと分かりやすくなります。

重要： background-clip: text は、テキストクリップ効果を表示するために -webkit-text-fill-color: transparent が必要です。

❓ よくある質問

Qbackground-clip と background-origin の違いは？

Aclip は背景の塗りつぶしがどこで止まるか（クリップの境界）を制御し、origin は背景画像の位置決めの基準点を制御します。例えば clip: border-box は背景をボーダーの下まで広げ、origin: border-box は画像をボーダーの左上隅から配置します。background-color は clip だけに影響され、origin は背景画像にのみ適用されます。

Qグラデーションのテキスト効果を作るには？

A3 つの手順です。background-image でグラデーションを設定し、background-clip: text で背景をテキストのアウトラインにクリップし、-webkit-text-fill-color: transparent でテキストの塗りつぶしを透明にします。さらに background-repeat: no-repeat を追加して、グラデーションがタイル状に並ばないようにします。

Q3 つの background-clip の値はそれぞれ何をしますか？

Aborder-box（デフォルト）: 背景はボーダー領域まで広がり、ボーダーはその上に描画されます。padding-box: 背景はパディング領域内だけに表示され、ボーダーの下には背景がありません。content-box: 背景はコンテンツ領域のみに表示されるため、パディング領域にも背景がありません。要素にボーダーを付けて比較してみてください——透明なボーダーや破線のボーダーなら違いがはっきり分かります。

Qbackground-clip: text のブラウザ対応は？

Aモダンブラウザはすべて background-clip: text をサポートしていますが、古い Safari/Chrome では -webkit-background-clip: text プレフィックスと -webkit-text-fill-color: transparent が必要です。サポートされていない環境では、テキストは通常の塗りつぶし色にフォールバックするため、@supports でフォールバックを用意するのが良いでしょう。