Liquid Glass UI in SwiftUI: Complete iOS 26 Design Tutorial

What Is Liquid Glass?

Liquid Glass is Apple's new design language, introduced at WWDC 2025 and shipping with iOS 26, macOS Tahoe, watchOS 26, and visionOS 26. It is a translucent, dynamic material that reflects and refracts the content underneath it, creating a sense of depth and hierarchy that flat design never could.

Think of it as the spiritual successor to the blur materials Apple introduced in iOS 7, but far more sophisticated. Liquid Glass does not just blur. It bends light, responds to motion, and morphs between shapes. It makes controls feel like they are floating on the content layer, which creates a clear visual separation between what you are looking at and what you can interact with.

The most visible examples are everywhere in iOS 26: the tab bar, navigation bar, toolbars, Control Center, and the Lock Screen all use Liquid Glass. If you recompile your existing SwiftUI app with Xcode 26, your standard navigation bars and tab bars will automatically adopt the glass appearance with zero code changes.

Automatic Adoption: What You Get for Free

Before writing any new code, let me be clear about what happens automatically. When you recompile your app with Xcode 26 and target iOS 26, these standard components adopt Liquid Glass without any changes:

• NavigationStack / NavigationBar: The navigation bar becomes translucent glass that blends with the scrolling content beneath it.
• TabView / Tab Bar: Tab bars get the glass treatment, including support for the new collapsible behavior when users scroll.
• Toolbars: Toolbar items gain translucent backgrounds that prioritize symbol-based buttons for a cleaner look.
• Sheets and popovers: System-presented sheets and popovers pick up glass styling automatically.

This is the beauty of using standard SwiftUI components. If your app already uses NavigationStack and TabView, you get a modern iOS 26 appearance just by recompiling. No modifier changes, no new APIs needed. If you built a custom tab bar from scratch, you will need to add glass manually, which is what the rest of this tutorial covers.

The glassEffect Modifier

The core API for applying Liquid Glass to custom views is the .glassEffect() modifier. It places a translucent glass shape behind your content, and it is surprisingly simple to use.

// Basic glass effect with default capsule shape
Text("Hello, Glass")
    .padding()
    .glassEffect()

By default, .glassEffect() applies the .regular variant in a .capsule shape. The regular variant gives you the standard translucent glass appearance you see throughout iOS 26.

Glass Variants

There are three built-in variants, and each serves a different purpose.

You can specify the variant explicitly:

// Clear glass for a subtle look
Text("Subtle")
    .padding()
    .glassEffect(.clear)

// Regular glass with a custom shape
Text("Rounded")
    .padding()
    .glassEffect(.regular, in: .rect(cornerRadius: 16))

Shape Options

The second parameter controls the shape of the glass. Available options include:

• .capsule (default): Pill-shaped, great for buttons and labels.
• .circle: For icon buttons and circular controls.
• .rect(cornerRadius:): Rounded rectangles with a custom corner radius.
• .containerConcentric: Aligns corner radii with the parent container, which is perfect for nested glass elements.
• .ellipse: For oval shapes.
• Any custom Shape: You can pass any type conforming to the Shape protocol.

GlassEffectContainer: Grouping Glass Elements

Here is a critical detail that is easy to miss: glass cannot sample other glass. If you place two glass elements next to each other without grouping them, you will get visual artifacts because each element is trying to refract the other. This is where GlassEffectContainer comes in.

GlassEffectContainer(spacing: 40) {
    HStack(spacing: 12) {
        Image(systemName: "star.fill")
            .padding()
            .glassEffect()
        Image(systemName: "heart.fill")
            .padding()
            .glassEffect()
    }
}

GlassEffectContainer wraps multiple glass elements so the rendering engine can compose them as a single visual layer. The spacing parameter controls the morphing threshold: elements within this distance will visually blend and merge into one unified glass shape during transitions.

A lower spacing value (like 10) means elements only merge when they are very close. A higher value (like 40 or more) causes them to merge earlier, creating a more fluid, connected feel. Experiment with this value to get the right balance for your UI.

Interactive Glass Effects

For buttons and controls that users tap, you want the glass to respond to touch. The .interactive() modifier adds press feedback: the glass scales, bounces, and shimmers when tapped.

Button(action: { /* handle tap */ }) {
    Label("Save", systemImage: "square.and.arrow.down")
        .padding()
}
.glassEffect(.regular.interactive())

The interactive variant is specifically designed for controls. Do not apply it to static content like labels or decorative elements. Apple's system uses interactive glass for toolbar buttons, tab bar items, and floating action buttons. Match that pattern in your custom UI.

You can also combine interactive glass with a tint color:

Button("Delete") { /* ... */ }
    .padding()
    .glassEffect(.regular.tint(.red).interactive())

Morphing Between Glass Elements

One of the most striking features of Liquid Glass is morphing, where glass shapes fluidly transition from one form to another. You achieve this with the .glassEffectID() modifier, which links elements together so SwiftUI can animate between them.

This is useful for state transitions. For example, a compact toolbar button that expands into a larger panel, or tab bar items that shift position. The glass does not just fade. It physically morphs from one shape to another, maintaining the translucent material throughout the animation.

Morphing works best within a GlassEffectContainer. The container's spacing parameter determines when two elements are close enough to begin merging visually, which creates the signature "liquid" feel of the design language.

New Tab Bar Features with Liquid Glass

The TabView in iOS 26 comes with several new capabilities that integrate directly with Liquid Glass.

• Collapsible tab bar: Add .tabBarMinimizeBehavior(.onScrollDown) to automatically minimize the tab bar when the user scrolls down. The tab bar shrinks into a compact floating capsule, giving more screen real estate to content.
• Search role: You can assign a .search role to a tab, which creates a floating search button at the bottom-right corner of the screen instead of a standard tab bar item.
• Tab bar accessories: Place custom views above the tab bar using tab bar accessory APIs. These accessories also adopt the glass styling.

If you previously built a custom tab bar to get these behaviors, it might be time to switch back to the standard TabView. The built-in implementation now covers most of the use cases that used to require custom code. Check out our custom tab bar tutorial for a comparison of both approaches.

When to Use Glass (and When Not To)

Apple's updated Human Interface Guidelines are clear about the philosophy: Liquid Glass belongs on the navigation layer, not the content layer. Controls float on glass. Content sits underneath.

Good uses of glass:

• Floating action buttons and toolbars
• Navigation bars and tab bars (automatic)
• Overlay controls on media players
• Compact, floating UI elements like badges or status indicators
• Card-style containers for secondary controls

Avoid glass on:

• Primary content: Do not put your main content (text, images, lists) behind glass. Glass is for controls that sit above content.
• Large background areas: A full-screen glass background defeats the purpose. Glass needs contrasting content behind it to look good.
• Text-heavy elements: Glass can reduce readability for body text. Keep glass on buttons and labels, not paragraphs.
• During gameplay: Apple provides APIs to selectively disable glass effects during active gameplay while keeping them in menus. Use this.

Accessibility and Liquid Glass

Translucent materials can be a problem for users with visual impairments. Apple handles this thoughtfully. When a user enables "Reduce Transparency" in Accessibility settings, the system automatically increases the opacity of glass elements and adjusts visual effects to maintain legibility. You do not need to write any additional code for this. It happens at the system level.

However, you should still test your app with "Reduce Transparency" enabled to make sure your custom glass elements look acceptable in the opaque fallback state. If you are applying glass to custom views with complex layouts, the opaque version might need layout adjustments. Check our accessibility guide for a broader look at making SwiftUI apps accessible.

Performance Considerations

Glass effects involve real-time compositing, blurring, and refraction. On modern Apple hardware (A15 and later, M1 and later), the performance impact is negligible. Apple has optimized the rendering pipeline in iOS 26 specifically for this.

That said, a few things can cause issues:

• Too many overlapping glass layers: Each glass layer needs to sample the content below it. Stacking multiple glass elements on top of each other forces the GPU to do extra passes.
• Large glass surfaces: A full-width glass banner takes more GPU work than a small floating button. Keep glass elements compact.
• Skipping GlassEffectContainer: Without the container, glass elements render independently and may cause redundant compositing work.

For most apps, performance is not something you need to worry about. But if you are building something with a lot of animated, overlapping glass elements (like a custom music player or dashboard), profile with Instruments to make sure you are not dropping frames.

Migrating Custom UI to Liquid Glass

If you have an existing app with custom blur materials or translucent overlays, here is a practical migration plan:

1. Recompile with Xcode 26. Your standard NavigationBars, TabBars, and Toolbars will adopt glass automatically.
2. Audit custom blur effects. Replace any .background(.ultraThinMaterial) or .background(.blur(radius:)) on control elements with .glassEffect().
3. Wrap grouped controls. Any area with multiple glass elements gets a GlassEffectContainer.
4. Add interactivity. Buttons and tappable controls should use .glassEffect(.regular.interactive()).
5. Test accessibility. Toggle "Reduce Transparency" in Settings and verify your UI remains usable.
6. Check dark mode. Glass looks different against dark backgrounds. Make sure your design tokens work with glass in both modes.

Getting Started Quickly

Liquid Glass is one of those features where the API is simple but the design decisions are nuanced. The best way to learn is to experiment. Start with a single .glassEffect() on a button, see how it looks against your content, and build from there.

If you are starting a new iOS 26 project, The Swift Kit gives you a production-ready SwiftUI codebase with a centralized design system, dark mode support, and animation patterns that are ready for the Liquid Glass era. You get a solid foundation and can focus on making your app look beautiful with the new design language.