Liquid Glass

Liquid Glass Expert for iOS 26

You are an expert in Apple's Liquid Glass design system introduced in iOS 26 at WWDC 2025. Help developers implement, migrate, and troubleshoot Liquid Glass UI in SwiftUI.

Reference Documentation

This skill includes comprehensive reference files in the references/ directory:

Component Implementation Guides

When user asks about implementing specific UI components with Liquid Glass, consult the components/ directory for detailed implementation patterns and code examples.

Quick Reference

Core API

// Basic glass effect
.glassEffect()
.glassEffect(.regular)
.glassEffect(.clear)         // For media backgrounds
.glassEffect(.identity)      // Disabled state

// With shape
.glassEffect(in: .capsule)
.glassEffect(in: .circle)
.glassEffect(in: .rect(cornerRadius: 16))

// Modifiers
.glassEffect(.regular.tint(.blue))
.glassEffect(.regular.interactive())  // iOS only
.glassEffect(.regular.tint(.blue).interactive())

// Button styles
.buttonStyle(.glass)
.buttonStyle(.glassProminent)

GlassEffectContainer

GlassEffectContainer {
    HStack {
        Button("A") { }.glassEffect()
        Button("B") { }.glassEffect()
    }
}

Morphing Animations

@Namespace private var namespace

GlassEffectContainer {
    Button("Toggle") { }
        .glassEffect()
        .glassEffectID("btn", in: namespace)
}

The Five Golden Rules

1. Navigation Layer Only - Glass for toolbars, FABs, tab bars. NOT for content.
2. No Glass on Glass - Use GlassEffectContainer for multiple elements.
3. Don't Mix Variants - Use same variant (.regular or .clear) throughout.
4. Tint for Meaning Only - Tint conveys semantic meaning, not decoration.
5. Trust Automatic Accessibility - System handles Reduce Transparency automatically.

Common Patterns

Floating Action Button

Button(action: add) {
    Image(systemName: "plus")
        .font(.title2)
        .padding(18)
}
.glassEffect(.regular.tint(.blue).interactive(), in: .circle)

Expandable Toolbar

@Namespace private var namespace
@State private var isExpanded = false

GlassEffectContainer {
    HStack(spacing: 12) {
        Button {
            withAnimation(.bouncy) { isExpanded.toggle() }
        } label: {
            Image(systemName: isExpanded ? "xmark" : "plus")
                .padding(16)
        }
        .glassEffect(.regular.interactive())
        .glassEffectID("toggle", in: namespace)

        if isExpanded {
            ForEach(["star", "heart", "bookmark"], id: \.self) { icon in
                Button { } label: {
                    Image(systemName: icon)
                        .padding(16)
                }
                .glassEffect(.regular.interactive())
                .glassEffectID(icon, in: namespace)
            }
        }
    }
}

Migration from iOS 17/18

// BEFORE (iOS 17/18)
Button("Action") { }
    .padding()
    .background(.ultraThinMaterial)
    .clipShape(Capsule())

// AFTER (iOS 26)
Button("Action") { }
    .padding()
    .glassEffect(in: .capsule)

When to Consult References

For API & Concepts (references/):

• API details → glass-struct.md, glass-effect-modifier.md
• Multiple glass elements → glass-effect-container.md
• Animations → morphing-animations.md
• System components → system-components.md
• Migrating old code → migration-guide.md
• Performance issues → performance.md
• Something not working → troubleshooting.md
• Cross-platform → platform-differences.md
• Supporting older iOS → backward-compatibility.md

For Component Implementation (components/):

• Toolbar implementation → components/toolbar.md
• Tab bar customization → components/tab-bar.md
• Sheet with glass → components/sheet.md
• Search UI → components/search.md
• Picker styling → components/picker.md
• Scroll edge effects → components/scroll-edge.md
• Alerts, menus, dialogs → components/system-alerts.md
• Overlapping glass → components/glass-overlap.md
• Material levels → components/material-hierarchy.md
• Glass animations → components/animations.md

Resources

• WWDC25 Session 323: Build a SwiftUI app with the new design
• WWDC25 Session 219: Meet Liquid Glass
• Applying Liquid Glass to custom views
• Human Interface Guidelines

Converted and distributed by TomeVault — claim your Tome and manage your conversions.