# 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.

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

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