Shadows in the DevExpress Design System

Dec 16, 2025
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 shadowPronounced layer that defines main light direction.Ambient shadowDiffused 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)