CSS background-clip Property

This property determines the painting area of the background, essentially deciding where the background color or image stops.

selector { background-clip: border-box | padding-box | content-box | text; }
border-box The background extends to the outside edge of the border, painting underneath it.
padding-box The background extends to the outside edge of the padding but does not paint under the border.
content-box The background is painted only within the content box, excluding padding and borders.
text The background is clipped to the foreground text, making the text act as a mask for the background image or color.

Code Examples

A basic example showing how the content-box value limits the background color strictly to the area where the text resides.

<div style="width: 300px; height: 100px; padding: 20px; border: 10px dashed #333333; background-color: #ffcc00; background-clip: content-box;">
  The background only fills the content area, ignoring the padding and border.
</div>

An advanced example using the text value to create gradient text with a JavaScript toggle to switch between clipped and standard rendering.

<h1 id="hero-text" style="font-size: 80px; font-family: sans-serif; background: linear-gradient(to right, #ff0000, #0000ff); -webkit-background-clip: text; background-clip: text; color: transparent;">
  GRADIENT TEXT
</h1>

<button onclick="toggleClip()">Toggle Clipping</button>

<script>
function toggleClip() {
  const el = document.getElementById("hero-text");
  if (el.style.backgroundClip === "text" || el.style.webkitBackgroundClip === "text") {
    el.style.backgroundClip = "border-box";
    el.style.webkitBackgroundClip = "border-box";
    el.style.color = "#000000";
  } else {
    el.style.backgroundClip = "text";
    el.style.webkitBackgroundClip = "text";
    el.style.color = "transparent";
  }
}
</script>

Pro Tip

You can layer multiple backgrounds and apply different clipping values to each by comma-separating them. This allows for complex UI designs where a color fills the content area while a pattern fills the entire border area within a single element.

Deep Dive

Think of background-clip like a stencil or a coloring boundary. By default, browsers use border-box, which means if you have a dashed or transparent border, you will see the background color sitting underneath that border. When you switch to padding-box, the background stops at the edge of the padding, leaving the border area clean. The content-box value shrinks the background even further, only allowing it to show where your actual content sits. The most visual value is text, which turns your text into a window that reveals the background behind it. This is how you create those cool gradient-filled or photo-filled headings you see on high-end landing pages.

Best Practices

Use padding-box when you want to ensure a background pattern does not clash with a decorative border. When using the text value, always set the text color to transparent and provide a fallback background-color to ensure that the text remains readable even if the background image fails to load or the browser is older.

Common Pitfalls

The text value often requires the -webkit- prefix to work across all modern browsers. Another common mistake is confusing background-clip with background-origin. While clip defines where the background is painted, origin defines where the background image starts its positioning.

Accessibility

Accessibility is a major concern when clipping backgrounds to text. If the background image or gradient has colors too similar to the page background, users with low vision will struggle to read it. Always test contrast ratios and ensure the text remains legible.

Dev Data Table: background-clip property

default border-box
animatable no
inherited no
experimental no
year_intro 2011
year_standard 2011
js_syntax_1 element.style.backgroundClip = "padding-box";
js_syntax_2 element.style.setProperty("background-clip", "content-box");
js_note When using the text value in JavaScript, you might still need to target the vendor-prefixed webkitBackgroundClip property for broader compatibility.
browsers { "Chrome": 4, "Edge": 12, "Firefox": 4, "Safari": 5, "Opera": 10.5, "Chrome Android": 18, "Safari on iOS": 5, "Samsung Internet": "1.0", "Opera Mobile": 11 }
results render here...