# Elevation

> Elevation is the distance at which a surface sits above another, drawn as a shadow, a tint or a material. Material 3 sets it in dp levels, and iOS has no named shadow ramp.

Page: https://www.appetiteui.com/glossary/elevation. Elevation and shadows in Material 3 and iOS. Also called Shadow, Drop shadow.

## Why it matters

Elevation tells people what is on top and what can be dragged. It is also the easiest property to overuse: a shadow on every card flattens the signal.

The two platforms answer differently, so a shared design needs one ramp that both can read.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | No named ramp: materials and depth | Elevation levels | dropShadow/xs to 2xl |
| Card, resting | Not named | 0 dp outlined or filled, 1 dp elevated | See below |
| Menu | Glass material | 3 dp | See below |
| Slider thumb | Soft shadow in the file | 2 dp | See below |

## In Appetite UI

The Effects page holds dropShadow/xs to 2xl as one ramp for both platforms, with the same values in Brand and System mode. Liquid Glass is a separate set of styles for iOS.

## Example

A card rests on the ground with dropShadow/xs. When it is dragged, it moves up one step on the ramp, and a menu above it sits higher still.

## Common mistakes

- Shadow on every surface. Reserve it for what floats or moves.
- Reading the same dp on iOS. Apple’s depth is a material, not a number.
- Stacking a shadow on a tinted background. Separate with a hairline or a fill.
- Typing shadow values per component. Bind to the ramp.

## Questions

### Does iOS have elevation?

Not as numbered levels. iOS shows depth with materials such as Liquid Glass and with layering; Material 3 uses levels in dp. Appetite UI keeps one shadow ramp for both.

### How do I design elevation for iOS and Android together?

Use one ramp of shadow tokens and bind surfaces to it, rather than copying dp levels to iOS. Appetite UI’s dropShadow/xs to 2xl is that ramp.

## Sources

1. [Material Design 3: Elevation](https://m3.material.io/styles/elevation/overview)
2. [Material Components for Android: Card](https://github.com/material-components/material-components-android/blob/master/docs/components/Card.md)
3. [Material Components for Android: Menu](https://github.com/material-components/material-components-android/blob/master/docs/components/Menu.md)
4. [Apple Human Interface Guidelines: Materials](https://developer.apple.com/design/human-interface-guidelines/materials)

## Related

- Docs: [Effects](https://www.appetiteui.com/docs/effects)
- Article: [How to make Liquid Glass in Figma for iOS 27](https://www.appetiteui.com/blog/liquid-glass-in-figma)
- Glossary: [Liquid Glass](https://www.appetiteui.com/glossary/liquid-glass)
- Glossary: [Card](https://www.appetiteui.com/glossary/card)
- Glossary: [Corner radius](https://www.appetiteui.com/glossary/corner-radius)