CSS Background Clip

background-clip decides where a background gets cut off and stops being visible, and its most famous trick is clipping a gradient to just the shape of text.

In this page:

The Standard Clip Values
Border-Box vs Padding-Box in Practice
The text Value: Gradient Text
Requirements for Gradient Text
Clip vs Origin: Different Jobs

The Standard Clip Values

background-clip: border-box (the default) lets the background paint under the border area; padding-box stops the background at the inside edge of the border, so a visible border shows through instead of covering the background; content-box clips the background to just the content area, hiding it under both border and padding.

Example: The Standard Clip Values

css

<style>
.box {
  border: 10px dashed rgba(0,0,0,0.3);
  padding: 15px;
  background: orange;
  background-clip: content-box;
}
</style>
<div class="box">Clipped to just the content area</div>

Border-Box vs Padding-Box in Practice

With a semi-transparent or dashed border, border-box lets the background color/image show through the gaps in the border, while padding-box keeps the background strictly behind the border, making the border's own color the only thing visible in that region.

Example: Border-Box vs Padding-Box in Practice

css

<style>
.border-box {
  border: 10px dashed rgba(0,0,0,0.3);
  background: orange;
  background-clip: border-box;
}
.padding-box {
  border: 10px dashed rgba(0,0,0,0.3);
  background: orange;
  background-clip: padding-box;
}
</style>
<div class="border-box">border-box: shows through the dashed gaps</div>
<div class="padding-box">padding-box: stays behind the border</div>

The text Value: Gradient Text

background-clip: text (paired with a transparent text color, typically via -webkit-text-fill-color or color: transparent) clips the background to the exact shape of the text glyphs, letting a gradient or image show through as the text's fill -- this is the standard technique for gradient-colored headings.

Example: The text Value: Gradient Text

css

<style>
h1 {
  background: linear-gradient(90deg, purple, orange);
  background-clip: text;
  color: transparent;
}
</style>
<h1>Gradient Heading</h1>

Requirements for Gradient Text

The text value requires the element's own text color to be transparent (so the background shows through instead of solid text color) and, in some browsers, the -webkit-background-clip: text prefixed form alongside the standard property for full compatibility.

Example: Requirements for Gradient Text

css

<style>
h1 {
  background: linear-gradient(90deg, red, blue);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
</style>
<h1>Prefixed for full compatibility</h1>

Clip vs Origin: Different Jobs

background-clip controls where the background becomes invisible (the boundary); background-origin controls where a positioned image's coordinates start measuring from -- they can be set independently and solve different layout problems even though both reference the same three box regions.

Example: Clip vs Origin: Different Jobs

css

<style>
.box {
  border: 10px dashed black;
  padding: 10px;
  background-image: url('https://placehold.co/80x80');
  background-origin: content-box;
  background-clip: padding-box;
}
</style>
<div class="box">Origin measures position, clip cuts the visible boundary</div>

🔒

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Background Origin Next Lesson → CSS Borders