Background Clip

Controls the box around the background of an element.

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 rad-1"></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 rad-1"></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 rad-1"></div>

Text

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

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

Using utility variants

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

Using media queries

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

Using hover states

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