Opacity in the DevExpress Design System
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 Variables
| 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 |