Background Clip Property
Last updated: 2026-09-13
background-clip Background Clip Property
background-clip controls the painting area of a background, deciding within which box-model region the background (color or image) is shown. The default border-box extends the background under the border, padding-box clips it to the padding area, and content-box shows it only in the content area. CSS3 also added the text value for text clipping effects.
| Category | |
|---|---|
| Initial Value | border-box |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
background-clip: border-box | padding-box | content-box | text;⚙️ Values
| Value | Type | Description |
|---|---|---|
border-box | padding-box | content-box | text | Keyword | Background painting area |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-clip | ✓ v4 | ✓ v12 | ✓ v4 | ✓ v3.1 | ✓ v10 |
| Supported in all major browsers | |||||
Tip： The difference between border-box and padding-box is easier to see with a transparent or dashed border.
Important： background-clip: text requires -webkit-text-fill-color: transparent to reveal the text-clipped effect.
❓ FAQ
QWhat is the difference between background-clip and background-origin?
Aclip controls where the background stops being painted (the clipping boundary), while origin controls the reference point for background-image positioning. For example, clip: border-box lets the background extend under the border, while origin: border-box positions the image from the border's top-left corner. background-color is only affected by clip; origin applies only to background images.
QHow do I create a gradient text effect?
AThree steps: set the gradient with background-image; clip the background to the text outline with background-clip: text; and make the text fill transparent with -webkit-text-fill-color: transparent. Also add background-repeat: no-repeat so the gradient does not tile.
QWhat does each of the three background-clip values do?
Aborder-box (default): the background extends into the border area, and the border is painted above it. padding-box: the background only shows inside the padding area, with no background under the border. content-box: the background shows only in the content area, so even the padding region has no background. Add a border to an element and compare — a transparent or dashed border makes the difference obvious.
QWhat is the browser support for background-clip: text?
AModern browsers all support background-clip: text, but older Safari/Chrome need the -webkit-background-clip: text prefix plus -webkit-text-fill-color: transparent. Where unsupported, the text falls back to a normal fill color, so it is a good idea to provide a fallback via @supports.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
