designsystem-405634-opacity.md
The DevExpress Design System defines opacity styles as a standardized transparency scale in 5% increments from 0 (fully transparent) to 100 (fully opaque). This scale allows you to layer surfaces with a predictable visual hierarchy, apply states, blend foreground and background colors, and support adaptive theming.
Important
Applicable to DevExpress Blazor suite only.
The opacity scale corresponds to a group of base CSS variables shared by all DevExpress themes (no theme-level overrides).
The following section lists all available CSS variables and their associated values:
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-opacity-0 | 0 | |
--dxds-opacity-5 | 0.05 | |
--dxds-opacity-10 | 0.1 | |
--dxds-opacity-15 | 0.15 | |
--dxds-opacity-20 | 0.2 | |
--dxds-opacity-25 | 0.25 | |
--dxds-opacity-30 | 0.3 | |
--dxds-opacity-35 | 0.35 | |
--dxds-opacity-40 | 0.4 | |
--dxds-opacity-45 | 0.45 | |
--dxds-opacity-50 | 0.5 | |
--dxds-opacity-55 | 0.55 | |
--dxds-opacity-60 | 0.6 | |
--dxds-opacity-65 | 0.65 | |
--dxds-opacity-70 | 0.7 | |
--dxds-opacity-75 | 0.75 | |
--dxds-opacity-80 | 0.8 | |
--dxds-opacity-85 | 0.85 | |
--dxds-opacity-90 | 0.9 | |
--dxds-opacity-95 | 0.95 | |
--dxds-opacity-100 | 1 |