Liquid Glass: Adopting Apple's iOS 26 Design Language in Your App

What Liquid Glass Is

Liquid Glass is the design language Apple introduced at WWDC25 and shipped with iOS 26, iPadOS 26, macOS Tahoe 26, watchOS 26 and tvOS 26. It is a translucent material that reflects and refracts the content behind it and reacts to touch, light and motion. Navigation elements such as tab bars, toolbars and sidebars float in a glass layer above your content instead of sitting in opaque bars.

What You Get Automatically

Standard SwiftUI, UIKit and AppKit components adopt Liquid Glass when you build with Xcode 26 (the iOS 26 SDK) and run on the 26 releases:

• Tab bars and toolbars float, and toolbar items are grouped on shared glass backgrounds.
• Sheets have larger corner radii; half sheets are inset so content peeks through.
• Controls are rounder, and slider and toggle knobs morph into glass during interaction.
• Lists and forms get larger rows, and section headers are no longer rendered in all caps.
• A scroll edge effect keeps bar content legible over scrolling content.

Custom Glass in SwiftUI and UIKit

Apply glass sparingly, to the most important functional elements, never to the content layer itself.

GlassEffectContainer(spacing: 16) {
    HStack(spacing: 16) {
        Image(systemName: "pencil")
            .frame(width: 44, height: 44)
            .glassEffect(.regular.tint(.blue).interactive())
        Image(systemName: "trash")
            .frame(width: 44, height: 44)
            .glassEffect()
    }
}

Button("Continue") { next() }
    .buttonStyle(.glassProminent)

GlassEffectContainer groups nearby glass shapes so they render efficiently and can morph into each other (use glassEffectID(_:in:) for transitions). In UIKit, use UIGlassEffect inside a UIVisualEffectView, or the UIButton.Configuration styles glass() and prominentGlass().

Other APIs worth knowing:

In the 2026 releases (iOS 27), the look was refined without code changes and SwiftUI added toolbarMinimizeBehavior(.onScrollDown, for: .navigationBar) and Tab(role: .prominent).

The Opt-Out Key and Its End

The Info.plist key UIDesignRequiresCompatibility (Boolean) lets an app built with the iOS 26 SDK run in a compatibility mode that looks like the previous design. Apple described it as temporary, and its documentation now states that the system ignores the key when you build for iOS 27, iPadOS 27, macOS 27 or tvOS 27 or later.

Treat it as a bridge, not a strategy: as soon as you move to Xcode 27, the redesign applies anyway.

App Icons and Icon Composer

Icons are now layered and respond to lighting. iOS, iPadOS and macOS offer default (light), dark, clear and tinted appearances. Design foreground, middle and background layers, then import them into Icon Composer (bundled with Xcode 26) to group layers, adjust opacity and preview every appearance. Do not bake masks, blur or shadows into the artwork; the system applies them.

Accessibility

Liquid Glass adapts to Reduce Transparency, Increase Contrast and Reduce Motion, and people can choose a preferred glass look in Settings. Standard components handle this for you; custom glass does not always.

• Test custom elements under every combination of these settings.
• Read accessibilityReduceTransparency in SwiftUI or UIAccessibility.isReduceTransparencyEnabled in UIKit to switch to a solid background when needed.
• Provide increased-contrast variants for custom colors and an accessibility label for every icon-only toolbar button.

Common Pitfalls

• Custom bar backgrounds: opaque appearance settings on navigation bars, tab bars and toolbars block the glass and the scroll edge effect.
• Glass on glass: stacking glass elements reduces legibility and costs performance.
• Hard-coded metrics: fixed heights and corner radii clash with the new, rounder controls.
• Custom tab bars: a hand-built tab bar misses floating, minimizing and the search tab.
• Uppercase headers: code that relied on automatic all-caps section headers now shows title case.

Migration Checklist

1. Build with Xcode 26 without the opt-out key and screenshot every screen.
2. Remove custom backgrounds from bars, toolbars, sheets and popovers.
3. Replace custom tab bars and headers with system components where possible.
4. Group toolbar items and prefer SF Symbols over text buttons.
5. Rebuild the app icon in Icon Composer and check all appearances.
6. Test Reduce Transparency, Increase Contrast, Reduce Motion, dark mode and large text.
7. Profile scrolling and animations on older supported devices.

Cross-Platform Apps

React Native: components backed by native UIKit views, such as native-stack headers, alerts and switches, adopt Liquid Glass when built with Xcode 26. JavaScript-drawn tab bars and headers do not. Expo's expo-glass-effect package provides GlassView and GlassContainer, which fall back to a regular view where glass is unavailable.

Flutter: Flutter draws its own pixels, so Cupertino widgets do not change. The Flutter team has said it is not adding Liquid Glass to the current Cupertino library; community packages use platform views to embed native controls. System UI such as share sheets, permission prompts and the keyboard will still look new, so decide whether to match iOS or keep a brand-consistent look.

Related Topics

• Apple Human Interface Guidelines: The Complete Guide for App Developers
• iOS 26 SDK Requirement: What Developers Need to Prepare
• App Icon Design: Best Practices and Guidelines for 2026
• Mobile Accessibility: A Complete Guide to Building Inclusive Apps