Elevation
The stated height of a surface above the one behind it, from which its shadow is computed rather than chosen.
Near it
What it is made of
| what it is | Material: "Elevation is the distance between two surfaces on the z-axis", and it "is measured as the distance between components along the z-axis in density-independent pixels (dps)." | Google, Material Design 3, "Elevation". Read whole, 659 words, 2026-09-11. It is a DISTANCE, not an effect, which is the whole of the entry |
| expressed in | a shadow, or a tonal surface colour. Material: "Elevation can be shown as tonal surface colors or shadows" | Google, Material Design 3, "Elevation". Read whole, 659 words, 2026-09-11 |
| and the shadow is NOT the elevation | Material: "Tokens have no shadows or color; each platform determines the specific shadows and values to use at each elevation level" | Google, Material Design 3, "Elevation". Read whole, 659 words, 2026-09-11. The token carries a dp and nothing else; a shadow is what one platform decided that dp looks like. Our own drawing is built the same way: the elevation scene computes every shadow from a dp value through one function and contains no shadow constant anywhere, so a level cannot be drawn without saying how high it is |
| AND M3 CHANGED THE RULE, which most writing about this style has not caught up with | Material: "Shadows: Instead of applying shadows by default to all levels, use shadows only when required to create additional protection against a background or to encourage interaction", and "Levels: Elevation is now described in terms of levels". Their own summary of the change is "M2: Shadows applied at all levels" against "M3: Using color instead of shadows to communicate elevation" | Google, Material Design 3, "Elevation". Read whole, 659 words, 2026-09-11. So the shadow-at-every-level look that the word still calls to mind is M2, and the current system uses colour first and a shadow only where it earns its place |
| why it matters | Material: "Stick to using a small amount of elevation levels" and "Avoid changing the default elevation of Material 3 components" | Google, Material Design 3, "Elevation". Read whole, 659 words, 2026-09-11. A system that lets every component pick its own height has a z-axis nobody can read |
Sources
- Material Design 3 — Elevation, Google
Tokens have no shadows or color; each platform determines the specific shadows and values to use at each elevation level
Material Design
Flat 2.0
Glassmorphism