Elevation

Depth comes from tonal surface colors first and from shadows only where separation is needed.

• Interactive page: https://m3e.ljzapps.app/#foundations/elevation

Depth comes from tonal surface colors first and from shadows only where separation is needed. Five container roles run from surfaceContainerLowest to surfaceContainerHighest. Shadow elevation levels are 0, 1, 3, 6, 8 and 12 dp.

Surface(
    color = MaterialTheme.colorScheme.surfaceContainerHigh,
    shadowElevation = 3.dp,
    shape = MaterialTheme.shapes.large,
) { /* content */ }

Prefer a container role. Add shadowElevation only for floating elements.