Guide · updated for iOS 27
What is liquid glass?
Liquid glass is a UI material that behaves like thick, rounded glass: along its edge it bends and magnifies whatever is behind it, a thin highlight traces its rim from one light direction, and the text and icons on it stay flat and sharp. Apple introduced it with iOS 26 and refined it in iOS 27; the look itself can be built on any platform.
Updated · from the Meniscus design language
Liquid glass vs glassmorphism
Glassmorphism blurs the backdrop. Liquid glass bends it. Put the two over the same backdrop and the difference is the edge: glassmorphism leaves the stripes straight, liquid glass curves them inside its bezel.
| Liquid glass | Glassmorphism | |
|---|---|---|
| Backdrop | Bent and magnified inside a band along the edge (the bezel); calm in the centre | Blurred evenly; nothing bends |
| Edge | About 1 px specular rim, brightest towards the light, with a dark edge line outside it | A uniform 1 px white border |
| Fill | Light, taking its colour from what is behind | White at fixed opacity, often greyed |
| Content on it | Flat and sharp; children never get their own glass | Often more glass cards inside glass cards |
| Where it is used | Controls and overlays that float over content | Anything, including content cards |
The five non-negotiables
A surface is liquid glass only if all five hold. If one is missing it is ordinary glassmorphism.
- The backdrop bends at the edge. Inside a band along the silhouette (the bezel) the scene behind is displaced and magnified, as if seen through thick rounded glass; the centre stays nearly undistorted. Blur alone is not liquid glass. Test: put straight lines (a grid, a horizon, text) behind it — they must visibly curve inside the bezel.
- A thin specular rim traces the silhouette. About 1 px, brightest facing the key light (top-left), a dimmer counter-light on the opposite side (bottom-right), faint on the flanks.
- There is something to bend. Glass floats over a detailed, colourful backdrop (photo, wallpaper with edges, content scrolling underneath). On a flat solid colour it can only show its rim.
- Content on glass is flat. Labels, icons and child controls sit above the optics, are never refracted, and are drawn at full contrast. Children of a glass body do not get their own glass (no lens on a lens).
- Shapes are continuous. Capsules, circles and squircles (continuous corners); nested radii are concentric.
Materials
One material per glass body. The smaller the shape, the more it refracts; the larger, the more it frosts.
| Material | Looks like | Use for | Profile | Blur | Fill (light / dark) |
|---|---|---|---|---|---|
| Lens (clear) | Thick clear glass, strong bend, almost no haze | Small controls: buttons, icon buttons, chips, avatars, slider thumbs, tab/segment indicators, floating action buttons over media | convex (round) or squircle (capsule) | 0.5–1 px | white 4–8 % / black 10–18 % |
| Regular (default) | Clear glass with light haze; bends at the edge, calm centre | Bars and chrome: tab bar, toolbar, menubar, navigation bar, inputs, popovers, menus, cards | squircle | 2–6 px | white 12–18 % / black 26–34 % |
| Frost | Milky pane, edge bend still visible, backdrop reduced to colour | Text-heavy or large surfaces: dialogs, sheets, sidebars, notifications, long menus | squircle | 10–20 px | white 24–34 % / black 36–46 % |
| Tint | Regular glass carrying a colour | Selected/prominent states, "glass prominent" buttons, accent and danger variants | squircle | 1–4 px | accent at 25–40 % |
| Rim (stylised) | Flat interior, bending only in a thin edge band, crisp outline | Decorative outlines, dense lists of small tiles, OTP slots | rim | 0.5–2 px | white 6–10 % / black 18–25 % |
| Flat | No optics, only fill + hairline | Children inside another glass body, disabled states, reduced-transparency fallback | flat | 0 | vibrant fill 8–12 % |
What changed in iOS 27
Apple's iOS 27, iPadOS 27 and macOS 27 release (September 2026) changed the material. Work made to the first generation's numbers now looks a version behind:
- Stronger diffusion over busy content: regular and frost glass sit at the top of their blur range over text, photos and feeds.
- A darker look at the edge: a 1 px dark edge line now runs just outside a brighter specular rim.
- A clear-to-tinted setting lets the viewer make all glass clearer or more opaque; designs must hold at both ends.
- Sidebars on desktop and tablet run edge to edge instead of floating as an inset card.
- Desktop windows use continuous corners of about 20 px (26 px on macOS 26).
Anti-patterns
What assistants and quick mockups get wrong most often, why it fails and the fix.
| Anti-pattern | Why it fails | Fix |
|---|---|---|
| Blur + white opacity + 1 px white border ("glassmorphism card") | no refraction, reads as frosted cardboard | add bezel refraction and a directional rim |
| Glass cards inside glass cards | lens on lens, muddy, double rims | children flat; one glass body per stack |
| Glass over a flat or softly blurred gradient | nothing to bend, material invisible | detailed backdrop or content underneath |
| Uniform rim of equal brightness all around | no light direction | key light top-left, counter bottom-right |
| Heavy colour tint or grey desaturation of the backdrop | kills the "takes colour from behind" quality | light fill, saturation boost |
| Warped or refracted text/icons | content must stay legible | refract only the backdrop layer |
| Rainbow/chromatic fill over the whole surface | dispersion belongs to the silhouette | ≤ 1–2 px fringe at the edge, if any |
| Sharp-cornered rectangles, mismatched radii | glass is a moulded material | capsules, squircles, concentric radii |
| Overlapping glass siblings (stacked toasts, menu on its trigger) | lens on lens | ≥ 8 px gap or intentional morph |
| Glass on every element of a page | no hierarchy | glass for chrome and overlays only |
| Liquid metal on bars, panels or several controls | an opaque mirror hides the backdrop and flattens the hierarchy | one metal accent per view (icon, logo, hero rim, selected ring); the rest stays glass |
| Border beams on several elements, or a rotating conic beam on a wide capsule | noise without hierarchy; an angle-driven beam crawls mid-edge and races, stretched, round the caps | one beamed element per view, driven by distance along the outline |
| Glass controls on opaque demo tiles or a fixed full-page background | glass looks like grey plastic | detailed backdrop directly under each body |
| Glass host with its own fill (native button face, filled component frame) | the optic refracts that flat fill: uniform grey/white pill | host and containing frames paint nothing; fill only on the optic layer |
| Mirrored/doubled lines inside a lens edge | photo displacement over hard lines, or a squircle bend on a circle | fold-safe displacement over hard lines (0.7 × √bezel squircle, 0.9 × √bezel convex); convex for circles |
| Neon glows, dark inner shadows, bevel/emboss | skeuomorphic, not glass | specular rim + soft ambient shadow only |
| Desktop menubar/dock patterns dropped on mobile | wrong ergonomics | floating tab bar + bottom toolbar/sheets |
Review checklist
Check a design or a build against it: screenshot over a grid and over a photo, in light and dark.
- Straight lines behind each glass body curve inside its bezel; the centre is calm.
- Every body has a ~1 px rim, brighter top-left than bottom-right, with a faint dark edge line outside it.
- The backdrop has detail directly under every glass body (no opaque tile/section fill in between, no single fixed background for a long page).
- No mirrored or doubled lines inside lens edges (fold check).
- No glass body is a uniform flat pill: its host element / component frame paints no fill of its own.
- Text and icons are sharp, undistorted, and meet contrast on the worst part of the backdrop.
- No glass inside glass except the travelling indicator; separate bodies are ≥ 8 px apart.
- Materials fit the size: small = lens, bars = regular, text-heavy/large = frost.
- Capsules and squircles; radii concentric.
- One solid accent per group; modal overlays dim the world.
- Press/drag change thickness or scale, not only opacity; reduced motion and reduced transparency handled.
- The screen holds at both ends of the clear-to-tinted setting (clear with a dim layer over bright content, tinted with contrast from the fill).
Vocabulary
- Bezel
- edge band that bends
- Displacement
- backdrop shift at the outer edge
- Profile
- shape of the bend across the bezel (squircle, convex, rim, flat)
- Lens / Regular / Frost / Tint / Rim / Flat
- materials
- Key light / counter-light
- light directions of the specular layer
- Edge line
- dark hairline outside the rim
- Dim layer
- darkening behind modals or clear glass
- Clear-to-tinted setting
- the viewer's control over how much fill all glass carries
- Morph
- liquid merging of nearby glass bodies
- Concentric radius
- inner radius = outer − inset
- Scroll edge effect
- fade of content where it passes under a bar
- Dispersion
- chromatic fringe at the silhouette
- Caustics
- focused light patterns cast through glass or water
- Liquid metal
- opaque chrome accent whose reflections flow as bands
- Border beam
- short arc of light travelling along the rim at constant speed.
Questions
Is liquid glass the same as glassmorphism?
No. Glassmorphism is a blurred, white-tinted card with a uniform border. Liquid glass refracts: the backdrop visibly bends inside a band along the edge, a directional specular rim traces the silhouette, and content on the glass stays flat. Without the bend it is glassmorphism.
Can you make liquid glass with CSS?
Yes, in Chromium browsers: an SVG displacement map applied through backdrop-filter bends the backdrop at the edge. Safari and Firefox do not apply SVG filters in backdrop-filter, so they get a frosted fallback; a WebGL shader is the other way to refract on the web.
Does liquid glass work in Flutter and React Native?
Flutter can refract with an Impeller fragment shader on Android and iOS. React Native can use native iOS glass through Expo and needs honest fallbacks elsewhere. Meniscus has a recipe for each, with what the platform cannot do.
What changed in iOS 27?
Glass diffuses more over busy content, a dark edge line sits outside a brighter rim, viewers get a clear-to-tinted slider for all glass, and sidebars run edge to edge. Designs made to iOS 26 numbers look a generation behind.
How do I get an AI assistant to design real liquid glass?
Give it the rules and numbers instead of the word. Meniscus is an MCP server that hands Claude Code, Cursor, VS Code and other assistants the design language, component specs, platform recipes and reference images, with a checklist to verify the result.