この記事の要点

background-clip は背景（色・画像・グラデーション）をどの領域までクリッピングするか指定するプロパティ 主な値は border-box（既定）/ padding-box / content-box / text の 4 つ background-clip: text + color: transparent でグラデーション文字を作れる（要 -webkit- ベンダープレフィックス） 似た名前の background-origin は背景画像の原点位置を指定する別プロパティなので混同しない IE はサポートが限定的。text 値はモダンブラウザでも -webkit-background-clip 併記が安全

background-clip とは

background-clip は、要素の背景（背景色・背景画像・グラデーション）を「どこまでの領域に表示するか」を指定する CSS プロパティです。要素はボーダー・パディング・コンテンツの 3 層構造になっており、背景をそのうちのどの内側まで描くかを切り替えられます。

構文と値

.box {
    background-clip: border-box;   /* 既定 */
    background-clip: padding-box;
    background-clip: content-box;
    background-clip: text;         /* 文字の形でクリップ */
}

値	クリップ範囲
border-box（既定）	ボーダーの外縁まで。点線ボーダーの隙間からも背景が見える
padding-box	パディングの外縁まで。ボーダー部分は透過する
content-box	コンテンツ領域まで。パディング部分も透過する
text	文字の形でクリップ。文字色を transparent にすると背景が文字の形で抜ける

border-box / padding-box / content-box の違い

<div class="demo border">border-box</div>
<div class="demo padding">padding-box</div>
<div class="demo content">content-box</div>

.demo {
    width: 240px;
    padding: 20px;
    border: 8px dashed #333;
    background-color: #f59e0b;
    margin-bottom: 12px;
}

.border  { background-clip: border-box;  }
.padding { background-clip: padding-box; }
.content { background-clip: content-box; }

点線ボーダーを使うと差が分かりやすく観察できます。padding-box はボーダーの隙間から下地が透ける、content-box はパディング部分まで下地が見えます。

background-clip: text でグラデーション文字

特に人気なのが text 値。文字の形で背景をクリップするので、グラデーションや画像を文字色のように見せられます。

<h1 class="gradient-text">Hello, Gradient!</h1>

.gradient-text {
    font-size: 64px;
    font-weight: 900;
    background: linear-gradient(90deg, #ff6b6b, #f7d794, #6bdfff);

    /* 文字の形でクリップ */
    -webkit-background-clip: text;
            background-clip: text;

    /* 文字本体は透明にして、下の背景を見せる */
    color: transparent;
}

必ず color: transparent（または -webkit-text-fill-color: transparent）を併用してください。これがないと文字色で背景が覆われてしまい、グラデーションは見えません。

background-origin との違い

名前が似ている background-origin は別プロパティです。

プロパティ	役割
background-clip	背景をどこまで表示するか（描画範囲のクリッピング）
background-origin	背景画像の原点（0,0 の位置）をどのボックスの左上に置くか

つまり origin は「背景画像を貼る基準点」、clip は「貼った背景を切り取る範囲」。両方を組み合わせて、ボーダー内側に画像をピッタリ収めるといった指定ができます。

ブラウザ対応とプレフィックス

値	対応状況
border-box / padding-box / content-box	モダンブラウザ全般で OK。IE11 も使用可
text	Chrome / Edge / Safari / Firefox 対応。古い WebKit 系では -webkit-background-clip: text も併記が安全

関連

• 背景 — 親カテゴリ
• background-image プロパティ — 背景画像と組み合わせて使う