CSS background-clip Property

What You’ll Learn

The background-clip property controls how far a background color or image extends inside an element. It helps you clip backgrounds to the border, padding, content, or even the text itself.

Definition and Usage

The background-clip CSS property defines how far a background should extend within an element. It controls whether the background is painted under the border, inside the padding, only behind the content, or clipped to the shape of the text.

This is especially useful when an element has visible padding or borders and you want the background to stop before those areas. It is also the property behind many modern gradient text effects.

📝 Syntax

Apply background-clip to any element that has a background color or background image:

selector {

  background-clip: <box>;

}

Basic Example

.box {

  background-color: lightblue;

  padding: 20px;

  border: 5px solid darkblue;

  background-clip: content-box;

}

Syntax Rules

• The initial value is border-box.
• Use content-box when you want the background only behind the content area.
• Use padding-box when the border should stay empty but padding should be filled.
• For gradient text, combine background-clip: text with color: transparent.
• Add -webkit-background-clip: text for better Safari support on text clipping.

Default Value

The initial value of background-clip is border-box. That means the background extends to the outer edge of the border, although it is painted underneath the border itself.

💎 Property Values

These are the main background-clip keywords beginners use most often.

background-clip vs background-origin

Examples Gallery

Try background-clip with content-box, padding-box, gradient text, and a side-by-side value comparison.

.box {

  background-color: lightblue;

  background-image: linear-gradient(135deg, #38bdf8, #2563eb);

  padding: 20px;

  border: 5px solid #1e3a8a;

  background-clip: content-box;

}

.panel {

  background-image: linear-gradient(135deg, #fbbf24, #f97316);

  padding: 1rem;

  border: 8px solid #334155;

  background-clip: padding-box;

}

.title {

  background-image: linear-gradient(135deg, #38bdf8, #a855f7, #f472b6);

  background-clip: text;

  -webkit-background-clip: text;

  color: transparent;

}

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

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

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

.text { background-clip: text; color: transparent; }

💡 Best Practices