CSS background-clip Property

Definition and Usage

The background-clip property sets how far a background-color or background-image may paint. Clip it to the border box, the padding box, the content box, the letters, or the border area.

A thick border and some padding make the three box keywords easy to compare. background-origin is different: it chooses where position and size are measured from, not where the paint stops.

CSS Syntax

With several backgrounds, you can list one clip per layer, separated by commas, in the same order as background-image.

Property Values

The editors below use a dashed border and padding so you can see where the paint stops.

How to Use background-clip

Give the element a background, leave room with padding and a border, then choose which box keeps the paint.

1. Set a background-color or background-image (a linear-gradient() counts).
2. Add padding and a visible border so the three boxes differ. A dashed border makes border-box easy to spot.
3. Set background-clip on that element. It is not inherited.
4. For gradient text, also set -webkit-background-clip: text and color: transparent.

Live Preview

A dashed border, padding, and a blue gradient. Change background-clip and watch where the paint stops.

CSS Examples

Each snippet sets only the background, the space around it, and the clip keyword. Use Try It Yourself for a live editor.

<style>
  div {
    padding: 24px;
    border: 12px dashed #1e3a8a;
    background-image: linear-gradient(135deg, #38bdf8, #2563eb);
    background-clip: content-box;
  }
</style>

<div>Content area</div>

<style>
  div {
    padding: 24px;
    border: 12px dashed #1e3a8a;
    background-image: linear-gradient(135deg, #38bdf8, #2563eb);
    background-clip: padding-box;
  }
</style>

<div>Content area</div>

<style>
  h1 {
    font-size: 2rem;
    background-image: linear-gradient(90deg, #2563eb, #db2777);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
</style>

<h1>Gradient text</h1>

Key Takeaways