background-clip
Choosing the background painting area.
Overview
| Class | Declarations |
|---|---|
bg-clip-border | background-clip: border-box;
|
bg-clip-content | background-clip: content-box;
|
bg-clip-padding | background-clip: padding-box;
|
bg-clip-text | background-clip: text;
|
background-clip:<origin> | background-clip: <origin>;
|
Examples
Clip a background to a box
Compare identical boxes with an 8px dashed border and 24px padding. Only the background painting area changes; border, padding and layout size stay the same.
<!-- Border box · paint beneath the border --><div id="target" role="img" aria-label="Blue background clipped to border box" class="h:176px w:280px max-w:100% p-lg b:8px|dashed|color-mix(in|oklab,var(--color-violet-50)|50%,transparent) bg-clip-border bg-blue-30"></div><!-- Padding box · border band stays clear --><div id="target" role="img" aria-label="Blue background clipped to padding box" class="h:176px w:280px max-w:100% p-lg b:8px|dashed|color-mix(in|oklab,var(--color-violet-50)|50%,transparent) bg-clip-padding bg-blue-30"></div><!-- Content box · padding stays clear --><div id="target" role="img" aria-label="Blue background clipped to content box" class="h:176px w:280px max-w:100% p-lg b:8px|dashed|color-mix(in|oklab,var(--color-violet-50)|50%,transparent) bg-clip-content bg-blue-30"></div>Generated CSS
@layer utilities { .bg-clip-border { background-clip: border-box } .bg-clip-content { background-clip: content-box } .bg-clip-padding { background-clip: padding-box }}Clip a background to text
Clip a real gradient to the glyphs and make the glyph fill transparent only when text clipping is supported. The solid foreground remains the fallback.
<!-- Supported screen paint · solid print fallback --><p id="target" class="inline-block max-w:100% m:0 font-4xl font-semibold leading-lg bg-clip-text text-fill-color-current background-image:linear-gradient(90deg,var(--color-blue-50),var(--color-violet-50))@supports((background-clip:text))@screen text-fill-color-current@print text-fill-color:transparent@supports((background-clip:text))@screen">Clear type</p>Use this treatment sparingly for display text. Open print preview to check the solid label when background printing is disabled. The same guarded glyph-paint pattern is available in text fill color.
Apply conditionally
Widen to sm to move the painting edge from the border box to the content box. The geometry does not change. Print restores border-box clipping.
<!-- Border → content at sm --><div id="target" role="img" aria-label="Responsive background painting area" class="h:176px w:280px max-w:100% p-lg b:8px|dashed|color-mix(in|oklab,var(--color-violet-50)|50%,transparent) bg-clip-border bg-blue-30 bg-clip-border@print bg-clip-content@screen@sm"></div>Use background-origin to change the image’s positioning area instead of its painting boundary.