Utility classes for changing an element's opacity.
Use d-o{n} to change the opacity of your element.
<div class="d-p-200 d-bar-400 d-bgc-moderate d-o100">.d-o100</div> <div class="d-p-200 d-bar-400 d-bgc-moderate d-o75">.d-o75</div> <div class="d-p-200 d-bar-400 d-bgc-moderate d-o50">.d-o50</div> <div class="d-p-200 d-bar-400 d-bgc-moderate d-o25">.d-o25</div> <div class="d-p-200 d-bar-400 d-bgc-moderate d-o0">.d-o0</div>
Use h:d-o{n} to change an element's :hover state opacity.
<dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate h:d-o50">Hover me</dt-button>
Use f:d-o{n} to change an element's :focus and :focus-within state opacity.
<dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate f:d-o50">Focus me</dt-button>
Use fv:d-o{n} to change an element's :focus-visible state opacity [only when focused by keyboard].
<dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate fv:d-o50">Keyboard focus me</dt-button>
Class
|
Output
|
|---|---|
| .d-o0 | opacity: 0 !important; |
| .d-o5 | opacity: 0.05 !important; |
| .d-o10 | opacity: 0.1 !important; |
| .d-o20 | opacity: 0.2 !important; |
| .d-o25 | opacity: 0.25 !important; |
| .d-o30 | opacity: 0.3 !important; |
| .d-o40 | opacity: 0.4 !important; |
| .d-o50 | opacity: 0.5 !important; |
| .d-o60 | opacity: 0.6 !important; |
| .d-o70 | opacity: 0.7 !important; |
| .d-o75 | opacity: 0.75 !important; |
| .d-o80 | opacity: 0.8 !important; |
| .d-o90 | opacity: 0.9 !important; |
| .d-o100 | opacity: 1 !important; |
| .d-o-unset | opacity: unset !important; |
Opacity documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope