background-clip
Limits where the background is painted. bgct (text) clips the background to text shape for gradient text effects.
Class List
| Class | CSS | Description |
|---|---|---|
bgcbb | background-clip: border-box | Paints background to border area (default) |
bgcpb | background-clip: padding-box | Paints background to padding area only |
bgccb | background-clip: content-box | Paints background to content area only |
bgct | background-clip: text | Clips background to text shape (gradient text) |
Visual Demo
All three boxes use the same background color, the same 8px dashed border and the same padding. The only difference is the background-clip value. Watch whether the color shows through the gaps in the dashes to see how far the background reaches.
bgcbb
content
The color shows through the dash gaps. The background reaches under the border.
bgcpb
content
The dash gaps look empty. The background stops at the inner edge of the border.
bgccb
content
Border and padding are both empty. Only the area behind the text is painted.
Usage Examples
bgct applies gradients or images to text. Set color to transparent to show background.
<!-- Gradient text effect -->
<h1 class="bgct bglg-to-r-6366F1-A855F7 fs4-8rem fw900">
Gradient Text
</h1>
<!-- Background only up to padding area -->
<div class="bgcpb bg6366F1 p2rem b8pxdashed27272A">
No background in the border area
</div>
<!-- Background only in content area -->
<div class="bgccb bg34D399 p2rem b8pxdashed27272A">
Background only fills the content area
</div>Class Details
bgcbbbackground-clip: border-box
The default. Background color and image extend under the border area. With an opaque border nothing looks different, but the moment you use a dashed or translucent border the background shows through the gaps.
<!-- Default: the fill runs under the border -->
<div class="bgcbb bg6366F1 b8pxdashed27272A br8px p2rem">
The indigo shows through the dash gaps.
</div>bgcpbbackground-clip: padding-box
Cuts the background off at the inner edge of the border. Use it when a dashed, dotted or translucent border on a card looks muddy because the fill bleeds into it.
<!-- Dashed outline card that stays clean -->
<div class="bgcpb bg1E1E2E b2pxdashed27272A br8px p2rem">
<p class="fs16px fw600 cFAFAFA">Drop files here</p>
<p class="fs14px c71717A">The card fill stops at the border.</p>
</div>bgccbbackground-clip: content-box
Clears the padding as well and paints only the content area. Useful as a decorative double-border look where the padding stays an unpainted gap.
<!-- Padding stays unpainted, giving a double-frame look -->
<div class="bgccb bg6366F1 b8pxdashed27272A br8px p2rem">
<p class="fs14px cFFFFFF fw600">Only this line sits on the fill.</p>
</div>bgctbackground-clip: text
Clips the background to the shape of the glyphs so a gradient or image fills the text. It only shows up if you also set a background image and a transparent text color.
<!-- Needs BOTH a background image and a transparent text color -->
<h2 class="bgct bglg-to-r-6366F1-A855F7 fs4rem fw900">
Ship faster
</h2>
<!-- Without the gradient the glyphs look like they disappeared -->Practical Example — Hero Heading and Dashed Card
A real screen fragment combining a gradient heading with a dashed-border card: text clipping on the heading, padding-box clipping on the card.
<section class="py6rem tac">
<h1 class="bgct bglg-to-r-6366F1-A855F7 fs5rem fw900 lh1-2 mb16px">
Atomic CSS
</h1>
<p class="fs16px c71717A mb3-2rem">Utility classes, zero build step.</p>
<div class="bgcpb bg1E1E2E b2pxdashed27272A br8px p2rem maxw40rem mxa">
<p class="fs14px cFAFAFA fw600 mb4px">Try it in your project</p>
<p class="fs14px c71717A">The dashed frame stays crisp because the card
fill is clipped at the padding box.</p>
</div>
</section>Tips / Caveats
Without a transparent text color nothing shows
Adding bgct alone leaves the opaque text color covering the clipped background. The text color must be transparent for the background to appear. Conversely, forgetting the background image makes the text look like it vanished.
No difference with opaque borders
bgcpb is only noticeable with dashed, dotted or translucent borders. With a 1px solid border the result is indistinguishable from bgcbb.
Do not confuse it with background-origin
Clip decides where the painted background gets cut off, origin decides where the background image starts. With a plain background color origin has no effect at all, while clip still does.
Check selection and accessibility for gradient text
Because the text color is transparent, the text can become unreadable in forced-colors or high-contrast modes. Keep a fallback color for important copy.
Gradient text pattern
Set background-image (gradient) with bgct and set text color to transparent.
Browser compatibility
bgct may require -webkit-background-clip: text. Supported in most modern browsers.