Background Clip
Controls the box around the background of an element.
Widely available
This feature is well established and works across many devices and browser versions.
| Class | Style |
|---|---|
bc-bb | background-clip: border-box; |
bc-cb | background-clip: content-box; |
bc-pb | background-clip: padding-box; |
bc-t | background-clip: text; |
Border Box
Initial value
The background extends to the outer edge of the border (including the border itself).
<div class="b-3 b-d bc-bb bc-indigo-8 bg-indigo d-20 p-2"></div>Content Box
The background is confined to the content area, excluding padding and borders.
<div class="b-3 b-d bc-cb bc-indigo-8 bg-indigo d-20 p-2"></div>Padding Box
The background extends to the outer edge of the padding, but does not include the border.
<div class="b-3 b-d bc-indigo-8 bc-pb bg-indigo d-20 p-2"></div>Text
The background is clipped to the text itself, allowing for unique visual effects.
Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall.
<div class="bc-t fs-3xl fw-700 o-h px-4 py-2 rad-2 tc-transparent" style="background-image: linear-gradient(132deg, #413cb8 0.00%, #7a77cd 100.00%);"> London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall.</div>Using utility variants
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
Targeting different viewports
You can combine responsive breakpoints like sm:bc-*, md:bc-*, lg:bc-*, and xxl:bc-* to allow targeting specific utilities in different viewports.
Targeting hover states
Alternatively, you can apply :hover by using h:bc-* utility to override elements and change their values when hovering over them.