Shadows in the DevExpress Design System
- 2 minutes to read
The DevExpress Design System defines standard shadow styles to create depth, hierarchy, and visual emphasis in the interface. Shadow levels use offset, blur, spread, and color parameters to establish component layering and surface relationships.
Important
Applicable to DevExpress Blazor suite only.
Shadow Levels
Shadow levels in the DevExpress Design System use two layers to create a natural, realistic shadow effect:
- Key shadow
- Pronounced layer that defines main light direction.
- Ambient shadow
- Diffused layer that adds subtle softness.
Each layer specifies the following parameters:
- Horizontal offset
- Vertical offset
- Blur radius
- Shadow spread
- Color
Higher shadow levels use larger blur values and greater vertical offset. The following table lists available shadow levels and corresponding shadow types:
| Shadow Level | Shadow Type |
|---|---|
none |
No shadow (flat surfaces) |
xs |
Extra-small shadow for subtle elevation |
sm |
Small shadow for compact surfaces |
md |
Medium shadow for cards, small surfaces, flyouts |
lg |
Large shadow for dropdowns, callouts, popovers |
xl |
Extra-large shadow for high elevation surfaces |
2xl |
Maximum elevation for overlays and layered components |
Semantic CSS Variables
Shadow styles are defined at the theme level and correspond to semantic CSS variables. While variable references remain unchanged, associated values change according to the color mode (light or dark).
The following tables list shadow CSS variables and associated values in DevExpress Fluent themes:
Light Mode
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-box-shadow-none |
0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(0,0,0,0) | |
--dxds-box-shadow-xs |
0 1px 2px 0 rgba(0,0,0,0.14), 0 0 2px 0 rgba(0,0,0,0.12) | |
--dxds-box-shadow-sm |
0 2px 4px 0 rgba(0,0,0,0.14), 0 0 2px 0 rgba(0,0,0,0.12) | |
--dxds-box-shadow-md |
0 4px 8px 0 rgba(0,0,0,0.14), 0 0 2px 0 rgba(0,0,0,0.12) | |
--dxds-box-shadow-lg |
0 8px 16px 0 rgba(0,0,0,0.14), 0 0 2px 0 rgba(0,0,0,0.12) | |
--dxds-box-shadow-xl |
0 14px 28px 0 rgba(0,0,0,0.24), 0 0 8px 0 rgba(0,0,0,0.2) | |
--dxds-box-shadow-2xl |
0 32px 64px 0 rgba(0,0,0,0.24), 0 0 8px 0 rgba(0,0,0,0.2) |
Dark Mode
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-box-shadow-none |
0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(0,0,0,0) | |
--dxds-box-shadow-xs |
0 1px 2px 0 rgba(0,0,0,0.28), 0 0 2px 0 rgba(0,0,0,0.24) | |
--dxds-box-shadow-sm |
0 2px 4px 0 rgba(0,0,0,0.28), 0 0 2px 0 rgba(0,0,0,0.24) | |
--dxds-box-shadow-md |
0 4px 8px 0 rgba(0,0,0,0.28), 0 0 2px 0 rgba(0,0,0,0.24) | |
--dxds-box-shadow-lg |
0 8px 16px 0 rgba(0,0,0,0.28), 0 0 2px 0 rgba(0,0,0,0.24) | |
--dxds-box-shadow-xl |
0 14px 28px 0 rgba(0,0,0,0.48), 0 0 8px 0 rgba(0,0,0,0.4) | |
--dxds-box-shadow-2xl |
0 32px 64px 0 rgba(0,0,0,0.48), 0 0 8px 0 rgba(0,0,0,0.4) |