background-clip（背景クリッピング）を理解すると「背景の見え方」を自在にコントロールできる
背景クリッピング（background-clip）は、背景色や背景画像を“どこまで表示するか”を決めるプロパティです。
border や padding と組み合わせると、カード・ボタン・バッジなどの UI に“繊細な質感”を加えられます。
CSS と Tailwind CSS の両方で、初心者でも直感的に理解できるように丁寧に解説します。
background-clip の基本
背景を「どこまで塗るか」を決める
指定できる値は主に3つ。
- border-box：ボーダーの外側まで塗る（初期値）
- padding-box：パディングまで塗る（ボーダーの下には塗らない）
- content-box：コンテンツ部分だけ塗る（padding も塗らない）
これを理解すると、
「ボーダーの下に背景が入ってほしくない」
「背景を内側だけにしたい」
といった細かいデザインが可能になります。
border-box（初期値）：背景がボーダーの下まで塗られる
CSS
.box {
background: #3182ce;
border: 4px solid #1a202c;
background-clip: border-box; /* 初期値 */
}
Tailwind
<div class="bg-blue-600 border-4 border-gray-900 bg-clip-border">
内容
</div>
特徴
- 背景が border の下まで広がる
- ボーダーが“上に乗っている”ように見える
padding-box：背景をパディング内だけに収める
CSS
.box {
background: #3182ce;
border: 4px solid #1a202c;
background-clip: padding-box;
}
Tailwind
<div class="bg-blue-600 border-4 border-gray-900 bg-clip-padding">
内容
</div>
特徴
- 背景が border の下に入らない
- ボーダーが“くっきり”見える
- カードやボタンでよく使う
content-box：背景をコンテンツ部分だけにする
CSS
.box {
background: #3182ce;
padding: 20px;
border: 4px solid #1a202c;
background-clip: content-box;
}
Tailwind
<div class="bg-blue-600 p-5 border-4 border-gray-900 bg-clip-content">
内容
</div>
特徴
- padding 部分は背景が塗られない
- “内側だけ色がつく”特殊なデザイン
- バッジやタグでアクセントに使える
応用1：ボーダーを透かして背景を見せる（透明ボーダー × padding-box）
CSS版
.box {
background: linear-gradient(135deg, #4f46e5, #06b6d4);
border: 4px solid transparent;
background-clip: padding-box;
border-radius: 12px;
}
Tailwind版
<div class="bg-gradient-to-br from-indigo-600 to-cyan-400
border-4 border-transparent bg-clip-padding rounded-xl p-5">
グラデ背景＋透明ボーダー
</div>
ポイント
- border を透明にする
- background-clip: padding-box
- → ボーダー部分が“ガラスのように透ける”
モダンな UI でよく使われるテクニックです。
応用2：内側だけ背景を塗る“インナー背景”
CSS版
.inner-bg {
background: #f87171;
padding: 20px;
background-clip: content-box;
border: 2px solid #e11d48;
}
Tailwind版
<div class="bg-red-400 p-5 bg-clip-content border-2 border-red-600">
内側だけ背景
</div>
特徴
- padding 部分が透明になる
- “内側に色がついたカード”のような見た目
応用3：背景画像のクリッピング
CSS版
.box {
background-image: url(photo.jpg);
background-size: cover;
background-clip: content-box;
padding: 20px;
}
Tailwind版
<div class="bg-[url(photo.jpg)] bg-cover p-5 bg-clip-content">
背景画像が内側だけに表示
</div>
特徴
- 背景画像をコンテンツ部分だけに表示
- 余白部分は透明になる
- デザイン性の高いカードが作れる
応用4：角丸と組み合わせて“背景マスク”を作る
CSS版
.box {
background: #06b6d4;
border-radius: 20px;
padding: 20px;
background-clip: padding-box;
}
Tailwind版
<div class="bg-cyan-400 rounded-2xl p-5 bg-clip-padding">
角丸＋背景クリップ
</div>
ポイント
- border-radius と background-clip は相性が良い
- 角丸の内側だけ背景が塗られる
background-clip の深掘りポイント
1. border と background の“重なり”をコントロールする
border-box
→ 背景が border の下に入る
padding-box
→ border の下に背景が入らない
content-box
→ padding も塗らない
この違いを理解すると、
「ボーダーを強調したい」「背景を内側だけにしたい」などのデザインが簡単になります。
2. グラデーション背景と相性が抜群
特に padding-box と組み合わせると、
“グラデーションの縁が綺麗に切れる”ため、
カードやボタンが一気に洗練されます。
3. border-radius と組み合わせると“マスク”になる
background-clip は角丸に追従するため、
丸いカードや pill ボタンの背景を綺麗に整えられます。
4. outline とは別物
outline は外側に描画されるため、
background-clip の影響を受けません。
まとめ
background-clip は、背景の“塗られる範囲”をコントロールするプロパティで、
UI の質感を大きく左右します。
- border-box → ボーダーの下まで塗る（初期値）
- padding-box → ボーダーの下は塗らない
- content-box → コンテンツ部分だけ塗る
- グラデーション背景と相性抜群
- 透明ボーダーと組み合わせると“ガラス風”デザイン
- Tailwind では
bg-clip-*を使う
