topic

Design guides

for

Founders and product teams

date

2026-10-26

What is Apple’s Liquid Glass? A designer’s guide

Apple introduced Liquid Glass on June 9, 2025, as the new design language across iOS 26, iPadOS 26, macOS Tahoe 26, watchOS 26 and tvOS 26 (Apple Newsroom). It was the biggest visual change to Apple’s platforms in years, and it changed what users expect from an interface. Here’s what it is, how to use it in your app, how to bring its ideas to the web, and where it goes wrong.

What it is

Liquid Glass is a translucent material for controls and navigation. It sits on a layer above your content, picks up color from what’s behind it, and reacts to movement and light. The idea is simple: content comes first, and controls float above it instead of boxing it in.

Using it in an iOS or macOS app

• Start with Apple’s standard components, which adopt the new material when you build with the latest SDKs.
• Keep content in the main layer and controls in the floating layer.
• Read Apple’s Human Interface Guidelines before you customize anything.
• Test on real devices over busy backgrounds, like photos and maps.

Bringing the look to the web

You can borrow the ideas without copying Apple:

• Translucency: a blurred, slightly tinted background on floating elements, using the CSS backdrop-filter property.
• Layering: a clear front layer for navigation and controls, with content scrolling underneath.
• Edges: a thin light border and a soft shadow, so glass panels separate from the background.
• Restraint: use it for navigation bars and floating controls, not every card on the page.

Blur effects cost performance on older phones. Test on a mid-range device, and keep a solid fallback.

Where it goes wrong

• Contrast: text on glass over a busy background can become hard to read.
• Accessibility settings: respect reduced transparency and reduced motion, and on the web, offer a solid version for people who ask for less transparency.
• Dense screens: dashboards and data tables need solid surfaces.
• Brand fit: glass suits some brands and fights others.

How we use it

We use Liquid Glass ideas sparingly: navigation, floating controls and the occasional hero moment, always with a solid fallback. If you want your app or site to feel current without chasing every trend, book a 20-minute call.