背景
background-clip
background-clip は、背景（背景色と背景画像）をどの範囲まで描くかを指定します。文字の形に切り抜くこともできます。
構文<bg-clip># …
<bg-clip>#
<bg-clip> = <visual-box> | [ border-area || text ]
<visual-box> = content-box | padding-box | border-boxプレビュー
コード
.box {
background-image: linear-gradient(
135deg,
#88d1c7,
#77a7d7,
#eaac3a
);
border: 16px dashed rgb(31 41 55 / 0.3);
padding-block: 16px;
padding-inline: 16px;
color: transparent;
background-clip: text;
}コントロール
解説
値の書き方
border-box（初期値）：枠線の下まで描きます。padding-box：枠線の内側（内側の余白まで）に描きます。content-box：内側の余白を除いた、中身の範囲だけに描きます。border-area：枠線が描かれる形の中だけに描きます。破線なら線の部分だけで、枠線の色が透明でも形は使われます。text：文字の形の中だけに描きます。
このページのプレビューは、補助の宣言で背景にグラデーションを敷き、16px の半透明の破線の枠線と、16px の内側の余白を付けています。破線の隙間から、枠線の下まで背景があるかどうかが見えます。
文字の形に切り抜く（text）
text にすると、背景が文字の形に切り抜かれます。文字の色が上に描かれるので、color: transparent と一緒に書いて、グラデーションの文字などを作ります（このページのプレビューも、補助の宣言で文字の色を透明にしています）。背景が描かれないと文字が見えなくなるので、背景画像が読めないときに備えて背景色も付けておきます。
接頭辞の無い text に対応したのは、Chrome・Edge が 120、Safari が 14 からです。それより古いブラウザ向けには、-webkit-background-clip: text も書きます。
枠線の形に切り抜く（border-area）
border-area は、枠線の色を transparent にして、グラデーションの枠線を作るのに使えます。対応しているのは Chrome・Edge（150 以降）と Safari（18.2 以降）で、Firefox はまだ対応していません。text と並べて書くと、文字と枠線の両方の形に描きます。
background ショートハンドと重ね方
background ショートハンドに箱のキーワードを 1 つだけ書くと、background-origin と background-clip の両方がその値になります。2 つ書くと、1 つ目が background-origin、2 つ目が background-clip です。
背景画像を何枚も重ねるときは、カンマで区切って 1 枚ずつ書けます。背景色は、いちばん下の画像の background-clip に合わせて切り抜かれます。