Dialtone

Background Clip

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

Classes

ClassOutput
.d-bgc-unsetbackground-clip: unset !important;
.d-bgc-border-boxbackground-clip: border-box !important;
.d-bgc-padding-boxbackground-clip: padding-box !important;
.d-bgc-content-boxbackground-clip: content-box !important;
.d-bgc-textbackground-clip: text !important;

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>

Clipping text

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


<div class="d-bgc-text d-bgg-to-r d-bgg-from-purple-500 d-bgg-to-pink-400">...</div>
Last Updated: