CSS background-clip Property

CSS background-clip Property

The background-clip property in CSS controls how far the background image or color extends inside the element’s box model (border, padding, or content area).

1. Syntax

selector {
  background-clip: value;
}

2. Accepted Values

Value	Description
border-box (default)	Background extends inside the border, including padding & content.
padding-box	The backgroundstays inside the padding, but not the border.
content-box	The background is only inside the content area, ignoring border & padding.
text (for WebKit browsers)	Background applies only to the text (requires -webkit-background-clip).

3. Example – Using background-clip: border-box; (Default)

.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 10px solid black;
  background: orange;
  background-clip: border-box;
}

✅ The background covers the entire element, including the border.

4. Example – Using background-clip: padding-box;

.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 10px solid black;
  background: orange;
  background-clip: padding-box;
}

✅ The background covers only the padding and content, excluding the border.

5. Example – Using background-clip: content-box;

.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 10px solid black;
  background: orange;
  background-clip: content-box;
}

✅ The background only appears in the content area, ignoring padding and border.

6. Example – Using background-clip: text; (WebKit Browsers)

.text-box {
  font-size: 50px;
  font-weight: bold;
  background: linear-gradient(to right, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

✅ The background applies only to the text, creating a gradient text effect.

7. Best Practices

✔ Use padding-box to prevent backgrounds from covering borders.
✔ Use text for cool gradient text effects (with -webkit-background-clip).
✔ Combine with background-image for creative effects.