Background Clip

Utility	Properties
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

This example sets the background to border-box. 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 rad-1"></div>

Content Box

This example sets the background to 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 rad-1"></div>

Padding Box

This example sets the background to 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 rad-1"></div>

Text

This example sets the background to text. The background is clipped to the text itself, allowing for unique visual effects.

Hi, Anne. It's finally springtime

<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%);">
  Hi, Anne. It's finally springtime
</div>

Conditional styles

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Media modifiers

You can combine responsive breakpoints like sm:bc-*,md:bc-*, lg:bc-*, and xxl:bc-* allows targeting specific utilities in different viewports.

<div class="bc-cb md:bc-bb ..."></div>

Hover modifiers

Alternatively, you can apply :hover by using h:bc-* utility to override elements and change their values when hovering over them.

<div class="bc-cb h:bc-bb ..."></div>