Background Clip

Utilities for controlling whether an element's background extends underneath its border, padding, or content box.

Usage

Use d-bgc-{name} to control which box an element's background is clipped by.


<div class="d-bgc-border-box">...</div>
<div class="d-bgc-padding-box">...</div>
<div class="d-bgc-content-box">...</div>

Use d-bgc-text to clip the background color(s) within the foreground text.

<div class="d-ba d-bgc-text d-bgg-to-r d-bgg-from-magenta-400 d-bgg-to-purple-400 d-headline--xl">...</div>

Class	Output
.d-bgc-unset	background-clip: unset !important;
.d-bgc-border-box	background-clip: border-box !important;
.d-bgc-padding-box	background-clip: padding-box !important;
.d-bgc-content-box	background-clip: content-box !important;
.d-bgc-text	background-clip: text !important;