Elevation shows the relationships between different surfaces within an application. Consistently mapping elevation levels helps to create an application that mirrors the physical world and feels comfortable and understandable for users.
Component elevation
Components within each surface layer are mapped to a corresponding elevation level. The diagram below displays the relationship between components and their elevation levels.
Shadow specs
Proper use of shadows enhances the visual hierarchy and depth in an application. The chart below lists the shadow values to apply for each elevation level, ensuring consistent and realistic visual effects throughout the application.
| Layer name | Elevation | Box-shadow |
|---|---|---|
| Inset | -1 | Shadow 1: 0, 0, 2 px, 0 rgba(0,0,0,0.10) Shadow 2: 0, 0, 2 px, 0.5 px rgba(0,0,0,0.2) |
| Small (sm) | 0 | Shadow 1: 0, 0.5 px, 1.5 px, 0 rgba(0,0,0,0.05) |
| Standard (std) | 1 | Shadow 1: 0, 0.5 px, 1 px, -0.5 px rgba(0,0,0,0.10) Shadow 2: 0, 0.5 px, 1.5 px, 0 rgba(0,0,0,0.10) |
| Medium (md) | 2 | Shadow 1: 0, 2 px, 7.48 px, -0.5 px rgba(0,0,0,0.08) Shadow 2: 0, 1 px, 2 px, -1 px rgba(0,0,0,0.10) |
| Large (l) | 3 | Shadow 1: 0, 5 px, 9 px, -1.5 px rgba(0,0,0,0.10) Shadow 2: 0, 2 px, 3 px, -2 px rgba(0,0,0,0.10) |
| X Large (xl) | 4 | Shadow 1: 0, 10 px, 12.5 px, -2.5 px rgba(0,0,0,0.10) Shadow 2: 0, 2 px, 5 px, 1 px rgba(0,0,0,0.10) |
| XX Large (xxl) | 6 | Shadow 1: 0, 12.5 px, 25 px, -6 px rgba(0,0,0,0.25) |
Applied in practice
The following is an example page layout with a top navigation, side panel, and dialog box with an accompanying diagram of component elevations (right).
