Background-clip - CSS Property
Summary of characteristics of the background-clip property
border-box | content-box | padding-box | textborder-boxDiscrète: during an animation, the background-clip property passes from one value to another without transition.Per grammar: serialization in the order of syntax.Syntax diagram of background-clip.
background-clip property.The links in the diagram provide more details about the values.
Download the diagram in SVG.
In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:
- The syntax can be repeated as many times as there are backgrounds defined for the element, with the occurrences separated by commas.
Description of the background-clip property.
background-clip sets how far the background of the element extends: up to the border, just under the content, etc. If the border isn't solid
(dotted, double line, etc.) or isn't fully opaque, the background can also be seen under the border.
For a general overview of the backgrounds, refer to the page background.
Values for background-clip.
- background-clip: border-box;
Default value for background-clip. The background extends beneath the border.
- background-clip: padding-box;
The background stops just before the edge, covering the area of the inner padding.
- background-clip: content-box;
The background extends just under the block content.
- background-clip: content-box, border-box...;
Multiple values can be listed, separated by commas, when multiple backgrounds have been set by
background-image. Check out the pagebackgroundfor an explanation on multiple backgrounds. - background-clip: text; ⚠
The background is cut out by the text: it’s only visible behind the characters. If the characters are in a semi-transparent color, the effect can be interesting (see example below).
Échantillon - background-clip: initial; (
border-box) background-clip: inherit; background-clip: revert; background-clip: revert-layer; background-clip: revert-rule; background-clip: unset;See the following pages for more details:
initial,inherit,revert,revert-layer,revert-rule,unset.
Examples with the background-clip property.
The example below illustrates an interesting possibility of the background-clip property used with the value text, unfortunately
not standard and not documented by the W3C.
The element below features transparent text and in a particularly thick font.
Animation of the background-clip property.
background-clip can be animated, but since this property doesn't deal with numeric values, switching from one value to another happens abruptly.
If you want all the allowed values for background-clip to be included in the animation, you need to specify them in the @keyframes sequence.
Access the background-clip property via a program
With Javascript, read the value of background-clip.
In JavaScript, there are two ways to change the value of background-clip: the property name can be written in the kebab-case style typical
of CSS (a dash to separate words), or in camel-case, which is closer to the usual JavaScript notation (a capital letter to separate words).
let el = document.getElementById('id');
el.style['background-clip'] = 'border-box';
// or
let el = document.getElementById('id');
el.style.backgroundClip = 'border-box';
With Javascript, read the value of background-clip.
TTo read the value of background-clip in JavaScript, there are also two syntaxes.
Heads up! This code only works if the property was set directly on the element itself, via its style attribute, and not through a CSS selector.
The value is returned exactly as it was defined in the style sheet (content-box, padding-box, etc.).
let el = document.getElementById('id');
let value = el.style['background-clip'];
// or
let el = document.getElementById('id');
let value = el.style.backgroundClip;
With Javascript, read the computed value of background-clip.
To get the computed value of background-clip, the code is a little more complicated. The value of background-clip is returned as one of the
predefined values: content-box, border-box, etc.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('background-clip');
And with JQuery...
With jQuery, here's how to modify or read the value of the property background-clip.
// Read the value:
$('#id').prop('background-clip');
// Write the value:
$('#id').prop('background-clip', 'border-box');
$('#id').prop('{background-clip': 'border-box'});
With JQuery, read the computed value of background-clip.
With jQuery, reading the computed value of the property background-clip can be done with the following code.
let value = $('#id').css('background-clip');
Some other code examples.
You’ll find other code examples on the page Javascript and CSS, still about JavaScript and CSS.
Test it yourself.
The buttons below apply the entered value to the background-clip property and then show either the value as it was applied, or the computed value.
In the case of background-clip, these two buttons should give the same result since background-clip only accepts predefined values
(unless you enter an incorrect value).
Simulator.
The border of this element and the text are semi-transparent, so you can see the background image through them.
Browsers compatibility with background-clip.
The property background-clip doesn't have any compatibility issues on current browsers.
However, be careful with the text value, which isn't standardized and should be used with caution.
background-clip property to clip background images based on the element.text value in the background-clip syntax.Notes:
(1) Supported with the browser prefix -webkit-. Does not operate in relative position.
(2) Does not operate in relative position.
(3) Does not support the fixed value for the background-attachment property.
Supports the local value only if rounded corners are defined on the element.
background-clipproperty
textvalue
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari
Safari sur IOS
Opéra
Chrome
Edge
Firefox
Chrome pour Androïd
Samsung Internet
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Historic of the background-clip property.
The property background-clip appeared much later than the other background-related properties: you’ll have to wait until CSS version 3.
-
CSS Backgrounds and Borders Module Level 3
Level 3 of the specification also explains how to position the background relative to the background area, and how to crop it.
Regarding borders, the concept of image borders is introduced, as well as the ideas of rounded corners and box shadows.Regardingbackground-clipFirst definition of thebackground-clipproperty.
August 02, 2002Working Draft.
December 17, 2009Candidate Recommendation.
-
CSS Backgrounds and Borders Module Level 4
Level 4 of the specification introduces logical values that depend on the writing mode.
Regardingbackground-clipNo change regarding thebackground-clipproperty.November 25, 2025Working Draft.
See also, regarding backgrounds.
The W3C specification "CSS Backgrounds and Borders Module" covers everything about backgrounds: many properties that we list below.
Properties:
