Utilities for controlling whether an element's background extends underneath its border, padding, or content box.
Use d-bgc-{name} to control which box an element's background is clipped by.
<div class="d-bgc-border-box d-p-200 d-bgc-moderate d-ba d-baw4 d-bas-dashed d-bar-400">border-box</div> <div class="d-bgc-padding-box d-p-200 d-bgc-moderate d-ba d-baw4 d-bas-dashed d-bar-400">padding-box</div> <div class="d-bgc-content-box d-p-200 d-bgc-moderate d-ba d-baw4 d-bas-dashed d-bar-400">content-box</div>
Use d-bgc-text to clip the background color(s) within the foreground text.
<dt-text kind="headline" :size="700" class="d-ba d-bgc-text d-bgg-to-r d-bgg-from-magenta-500 d-bgg-to-purple-600">Magic stuff happens.</dt-text>
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; |
Background Clip documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope