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>