Opacity
Utilities for controlling the opacity of an element.
| Class Name | CSS Equivalent |
|---|---|
| opacity-full | opacity: var(--cds-sys-opacity-full); /* 100% */ |
| opacity-high | opacity: var(--cds-sys-opacity-high); /* 87% */ |
| opacity-medium | opacity: var(--cds-sys-opacity-medium); /* 60% */ |
| opacity-low | opacity: var(--cds-sys-opacity-low); /* 38% */ |
| opacity-disabled | opacity: var(--cds-sys-opacity-disabled); /* 38% */ |
| opacity-glass | opacity: var(--cds-sys-opacity-glass); /* 21% */ |
| opacity-hovered | opacity: var(--cds-sys-opacity-hovered); /* 8% */ |
| opacity-focused | opacity: var(--cds-sys-opacity-focused); /* 12% */ |
| opacity-pressed | opacity: var(--cds-sys-opacity-pressed); /* 12% */ |
| opacity-dragged | opacity: var(--cds-sys-opacity-dragged); /* 16% */ |
| opacity-none | opacity: var(--cds-sys-opacity-none); /* 0% */ |
Setting opacity to an element
<div class="[...] opacity-medium"></div>Adjusting Text Opacity
You can modify the alpha channel of a text color using the text-opacity-{level} utilities. These levels correspond to the opacity levels used for general elements. For example, applying text-opacity-disabled will set the text color to a disabled opacity, aligning with the specified level for general element opacity.
❗ Keep in mind
When configuring the text-opacity-{level} property, it's important to explicitly assign a text color to the text element. This is due to the scoping mechanism of CSS Custom Properties, where opacity can only be set at the same level or a higher level than the specified text color.
For instance, using <h2 class="on-surface text-opacity-medium">title</h2> will apply medium opacity to the on-surface color. However, if wrapped within a <div class="on-surface"><h2 class="text-opacity-medium">title</h2></div>, the opacity level of the h2 title will not be affected, as it is in a different scoping context.
| Class Name | CSS Equivalent |
|---|---|
| text-opacity-full | --cds-text-opacity: var(--cds-sys-opacity-full); /* 100% */ |
| text-opacity-high | --cds-text-opacity: var(--cds-sys-opacity-high); /* 87% */ |
| text-opacity-medium | --cds-text-opacity: var(--cds-sys-opacity-medium); /* 60% */ |
| text-opacity-low | --cds-text-opacity: var(--cds-sys-opacity-low); /* 38% */ |
| text-opacity-disabled | --cds-text-opacity: var(--cds-sys-opacity-disabled); /* 38% */ |
| text-opacity-glass | --cds-text-opacity: var(--cds-sys-opacity-glass); /* 21% */ |
| text-opacity-hovered | --cds-text-opacity: var(--cds-sys-opacity-hovered); /* 8% */ |
| text-opacity-focused | --cds-text-opacity: var(--cds-sys-opacity-focused); /* 12% */ |
| text-opacity-pressed | --cds-text-opacity: var(--cds-sys-opacity-pressed); /* 12% */ |
| text-opacity-dragged | --cds-text-opacity: var(--cds-sys-opacity-dragged); /* 16% */ |
| text-opacity-none | --cds-text-opacity: var(--cds-sys-opacity-none); /* 0% */ |
<div class="[...] on-surface text-opacity-medium"></div>Adjusting Background Opacity
You can modify the alpha channel of a background color using the bg-opacity-{level} utilities. These levels correspond to the opacity levels used for general elements. For example, applying bg-opacity-disabled will set the background color to a disabled opacity, aligning with the specified level for general element opacity.
❗ Keep in mind
When configuring the bg-opacity-{level} property, it's important to explicitly assign a background color to the element. This is due to the scoping mechanism of CSS Custom Properties, where opacity can only be set at the same level or a higher level than the specified background color.
For instance, using <div class="primary bg-opacity-medium">content</div> will apply medium opacity to the primary background color. However, if wrapped within a <div class="primary"><div class="bg-opacity-medium">content</div></div>, the opacity level of the inner div's background will not be affected, as it is in a different scoping context.
| Class Name | CSS Equivalent |
|---|---|
| bg-opacity-full | --cds-bg-opacity: var(--cds-sys-opacity-full); /* 100% */ |
| bg-opacity-high | --cds-bg-opacity: var(--cds-sys-opacity-high); /* 87% */ |
| bg-opacity-medium | --cds-bg-opacity: var(--cds-sys-opacity-medium); /* 60% */ |
| bg-opacity-low | --cds-bg-opacity: var(--cds-sys-opacity-low); /* 38% */ |
| bg-opacity-disabled | --cds-bg-opacity: var(--cds-sys-opacity-disabled); /* 38% */ |
| bg-opacity-glass | --cds-bg-opacity: var(--cds-sys-opacity-glass); /* 21% */ |
| bg-opacity-hovered | --cds-bg-opacity: var(--cds-sys-opacity-hovered); /* 8% */ |
| bg-opacity-focused | --cds-bg-opacity: var(--cds-sys-opacity-focused); /* 12% */ |
| bg-opacity-pressed | --cds-bg-opacity: var(--cds-sys-opacity-pressed); /* 12% */ |
| bg-opacity-dragged | --cds-bg-opacity: var(--cds-sys-opacity-dragged); /* 16% */ |
| bg-opacity-none | --cds-bg-opacity: var(--cds-sys-opacity-none); /* 0% */ |
<div class="[...] primary bg-opacity-medium"></div>Adjusting Border Opacity
You can modify the alpha channel of a border color using the border-opacity-{level} utilities. These levels correspond to the opacity levels used for general elements. For example, applying border-opacity-disabled will set the border color to a disabled opacity, aligning with the specified level for general element opacity.
❗ Keep in mind
When configuring the border-opacity-{level} property, it's important to explicitly assign a border color to the element. This is due to the scoping mechanism of CSS Custom Properties, where opacity can only be set at the same level or a higher level than the specified border color.
For instance, using <div class="border-primary border-opacity-medium">content</div> will apply medium opacity to the primary border color. However, if wrapped within a <div class="border-primary"><div class="border-opacity-medium">content</div></div>, the opacity level of the inner div's border will not be affected, as it is in a different scoping context.
| Class Name | CSS Equivalent |
|---|---|
| border-opacity-full | --cds-border-opacity: var(--cds-sys-opacity-full); /* 100% */ |
| border-opacity-high | --cds-border-opacity: var(--cds-sys-opacity-high); /* 87% */ |
| border-opacity-medium | --cds-border-opacity: var(--cds-sys-opacity-medium); /* 60% */ |
| border-opacity-low | --cds-border-opacity: var(--cds-sys-opacity-low); /* 38% */ |
| border-opacity-disabled | --cds-border-opacity: var(--cds-sys-opacity-disabled); /* 38% */ |
| border-opacity-glass | --cds-border-opacity: var(--cds-sys-opacity-glass); /* 21% */ |
| border-opacity-hovered | --cds-border-opacity: var(--cds-sys-opacity-hovered); /* 8% */ |
| border-opacity-focused | --cds-border-opacity: var(--cds-sys-opacity-focused); /* 12% */ |
| border-opacity-pressed | --cds-border-opacity: var(--cds-sys-opacity-pressed); /* 12% */ |
| border-opacity-dragged | --cds-border-opacity: var(--cds-sys-opacity-dragged); /* 16% */ |
| border-opacity-none | --cds-border-opacity: var(--cds-sys-opacity-none); /* 0% */ |
<div class="[...] border-primary border-opacity-medium"></div>