# Liquid Glass

> Liquid Glass is the translucent material Apple introduced with iOS 26 for bars, buttons and sheets that float over content. Material 3 has no equivalent.

Page: https://www.appetiteui.com/academy/glossary/liquid-glass. Liquid Glass in Figma: what it is and where it goes.

## At a glance

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Liquid Glass | No equivalent | liquidGlass effect styles |

## In practice

Glass belongs on the controls that sit above content, never on the content itself, and it needs a busy background to read as glass at all.

Appetite UI draws bars, buttons and sheets on Liquid Glass effect styles and keeps the floating tab bar on glass on iOS. The effects page says which style goes where.


How the styles map to iOS and Material 3, Appetite UI style, iOS, Material 3, what differs:

| Appetite UI style | iOS counterpart | Material 3 counterpart | What differs |
| --- | --- | --- | --- |
| `dropShadow/xs` to `2xl` | No named shadow ramp | Elevation levels, drawn as shadow and tonal surface | One ramp for both platforms, with the same values in Brand and System mode. |
| `liquidGlass/*` | Liquid Glass, on the iOS 27 transparency slider | None, Material 3 has no glass | Appetite UI fixes three stops of the slider as styles. Refraction and frost exist in Figma only. |
| `focusRing/*` | The system focus ring shown with a hardware keyboard | A state layer at 10% opacity (`M3/sys/state/focus`) | Appetite UI draws a 2 pt gap and a 2 pt ring on both platforms, where Material tints the control. |

## Questions

### Can you make Liquid Glass in Figma?

Yes, as effect styles with refraction, frost and light, which exist in Figma only. Appetite UI fixes stops of Apple’s transparency slider as styles and puts its iOS bars, buttons and sheets on them.

### Does Android have Liquid Glass?

No. Material 3 has no glass material; it shows depth with tonal surfaces and elevation. An Android frame in Appetite UI draws the same bars on solid surfaces.

## Sources

1. [Apple Human Interface Guidelines: Materials](https://developer.apple.com/design/human-interface-guidelines/materials)

## Related

- Docs: [Effects](https://www.appetiteui.com/docs/effects)
- Docs: [iOS](https://www.appetiteui.com/docs/ios)
- Article: [How to make Liquid Glass in Figma for iOS 27](https://www.appetiteui.com/blog/liquid-glass-in-figma)
- Article: [iOS 27 Figma components: what changed in Apple's kit and in Appetite UI's iOS mirror](https://www.appetiteui.com/blog/ios-27-figma-components)
- Glossary: [Tab bar](https://www.appetiteui.com/academy/glossary/tab-bar)
- Glossary: [Dynamic Island](https://www.appetiteui.com/academy/glossary/dynamic-island)