CSS 'background-clip' Property Explained

The CSS 'background-clip' property specifies the background's painting area. It determines whether the background extends into the border, beneath the border, or is clipped to the content or padding edge. This property helps create effects where the background needs to be constrained or visually adjusted relative to an element's box model layers.

See the Pen CSS 'background-clip' Property by Webzstore (@webzstore) on CodePen.

The 'background-clip' property offers fine-grained control over how an element's background is rendered in relation to its box model. By adjusting this property, designers can achieve various effects, enhancing their visual impact.

Browser Support For 'background-clip' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for background-clip for the full compatibility details, including mobile browsers.

CSS Syntax of the 'background-clip' Property

background-clip: border-box | padding-box | content-box | text | initial | inherit;

Usage of the 'background-clip' Property

Use 'background-clip' when you want to control the extent of an element's background—whether it should fill the entire box, including the border, stop at the border, or only fill the content or padding area. This property is particularly useful in design scenarios where the background needs to interact closely with the box model for visual effects, such as background bleed, text clipping (with the text value, described below), or creating borders with background contrast.

Property Values of the 'background-clip' Property

• Border-box: The background extends to the outside edge of the border (default). If the border is transparent, it will be visible beneath the border.
• Padding-box: The background extends to the outside edge of the padding. No background is drawn beneath the border.
• Content-box: The background is painted within the content box only. No background is drawn beneath the border or padding.
• Text: The background is painted only within the shapes of the element's foreground text. It is only visible if the text colour is fully or partly transparent, so it is usually paired with color: transparent and a gradient or image background.
• Initial: Sets this property to its default value (border-box).
• Inherit: Inherits this property from its parent element.

Clipping a background to text, with a readable fallback

Because the text colour is made transparent, the text is only readable if the clipped background actually paints. Set a solid, high-contrast color first, and apply the transparent colour only inside an @supports block for browsers that understand the text value. Per MDN, older versions of Chrome, Edge and Safari support the value only with the -webkit-background-clip prefix, so include both declarations.

.gradient-text {
  color: #5b21b6; /* readable fallback colour */
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text {
    background-image: linear-gradient(90deg, #5b21b6, #1d4ed8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

Check the contrast between the gradient and the page background (WCAG asks for at least 4.5:1 for normal text and 3:1 for large text) at every point along the gradient, and avoid gradient colours that fade into the page background. The text value may not work in every case in every browser; MDN notes, for example, that Firefox does not support it with background-attachment: fixed or multi-layer backgrounds.