iOS 26 Liquid Glass: Comprehensive Swift/SwiftUI Reference

This reference was generated using Claude's Research mode, compiling information from Apple's WWDC 2025 sessions, official documentation, and community resources into a single comprehensive guide.

Overview

iOS 26 Liquid Glass represents Apple's most significant design evolution since iOS 7, introduced at WWDC 2025 (June 9, 2025). Liquid Glass is a translucent, dynamic material that reflects and refracts surrounding content while transforming to bring focus to user tasks. This unified design language spans iOS 26, iPadOS 26, macOS Tahoe 26, watchOS 26, tvOS 26, and visionOS 26.

Liquid Glass features real-time light bending (lensing), specular highlights responding to device motion, adaptive shadows, and interactive behaviors. The material continuously adapts to background content, light conditions, and user interactions, creating depth and hierarchy between foreground controls and background content.

Key Characteristics:

• Lensing: Bends and concentrates light in real-time (vs. traditional blur that scatters light)
• Materialization: Elements appear by gradually modulating light bending
• Fluidity: Gel-like flexibility with instant touch responsiveness
• Morphing: Dynamic transformation between control states
• Adaptivity: Multi-layer composition adjusting to content, color scheme, and size

Part 1: Foundation & Basics

1.1 Core Concepts

Design Philosophy Liquid Glass is exclusively for the navigation layer that floats above app content. Never apply to content itself (lists, tables, media). This maintains clear visual hierarchy: content remains primary while controls provide functional overlay.

Material Variants

| Variant | Use Case | Transparency | Adaptivity | |---------|----------|--------------|------------| | .regular | Default for most UI | Medium | Full - adapts to any content | | .clear | Media-rich backgrounds | High | Limited - requires dimming layer | | .identity | Conditional disable | None | N/A - no effect applied |

When to Use Each Variant:

• Regular: Toolbars, buttons, navigation bars, tab bars, standard controls
• Clear: Small floating controls over photos/maps with bold foreground content
• Identity: Conditional toggling (e.g., glassEffect(isEnabled ? .regular : .identity))

Design Requirements for Clear Variant (all must be met):

1. Element sits over media-rich content
2. Content won't be negatively affected by dimming layer
3. Content above glass is bold and bright

1.2 Basic Implementation

Simple Glass Effect

import SwiftUI

struct BasicGlassView: View {
    var body: some View {
        Text("Hello, Liquid Glass!")
            .padding()
            .glassEffect()  // Default: .regular variant, .capsule shape
    }
}

With Explicit Parameters

Text("Custom Glass")
    .padding()
    .glassEffect(.regular, in: .capsule, isEnabled: true)

API Signature

func glassEffect<S: Shape>(
    _ glass: Glass = .regular,
    in shape: S = DefaultGlassEffectShape,
    isEnabled: Bool = true
) -> some View

1.3 Glass Type Modifiers

Core Structure

struct Glass {
    static var regular: Glass
    static var clear: Glass
    static var identity: Glass

    func tint(_ color: Color) -> Glass
    func interactive() -> Glass
}

Tinting

// Basic tint
Text("Tinted")
    .padding()
    .glassEffect(.regular.tint(.blue))

// With opacity
Text("Subtle Tint")
    .padding()
    .glassEffect(.regular.tint(.purple.opacity(0.6)))

Purpose: Convey semantic meaning (primary action, state), NOT decoration. Use selectively for call-to-action only.

Interactive Modifier (iOS only)

Button("Tap Me") {
    // action
}
.glassEffect(.regular.interactive())

Behaviors Enabled:

• Scaling on press
• Bouncing animation
• Shimmering effect
• Touch-point illumination that radiates to nearby glass
• Response to tap and drag gestures

Method Chaining

.glassEffect(.regular.tint(.orange).interactive())
.glassEffect(.clear.interactive().tint(.blue))  // Order doesn't matter

1.4 Custom Shapes

Available Shapes

// Capsule (default)
.glassEffect(.regular, in: .capsule)

// Circle
.glassEffect(.regular, in: .circle)

// Rounded Rectangle
.glassEffect(.regular, in: RoundedRectangle(cornerRadius: 16))

// Container-concentric (aligns with container corners)
.glassEffect(.regular, in: .rect(cornerRadius: .containerConcentric))

// Ellipse
.glassEffect(.regular, in: .ellipse)

// Custom shape conforming to Shape protocol
struct CustomShape: Shape {
    func path(in rect: CGRect) -> Path {
        // Custom path logic
    }
}
.glassEffect(.regular, in: CustomShape())

Corner Concentricity Maintains perfect alignment between elements and containers across devices:

// Automatically matches container/window corners
RoundedRectangle(cornerRadius: .containerConcentric, style: .continuous)

1.5 Text & Icons with Glass

Text Rendering

Text("Glass Text")
    .font(.title)
    .bold()
    .foregroundStyle(.white)  // High contrast for legibility
    .padding()
    .glassEffect()

Text on glass automatically receives vibrant treatment - adjusts color, brightness, saturation based on background.

Icon Rendering

Image(systemName: "heart.fill")
    .font(.largeTitle)
    .foregroundStyle(.white)
    .frame(width: 60, height: 60)
    .glassEffect(.regular.interactive())

Labels

Label("Settings", systemImage: "gear")
    .labelStyle(.iconOnly)
    .padding()
    .glassEffect()

1.6 Accessibility Support

Automatic Adaptation - No code changes required:

• Reduced Transparency: Increases frosting for clarity
• Increased Contrast: Stark colors and borders
• Reduced Motion: Tones down animations and elastic effects
• iOS 26.1+ Tinted Mode: User-controlled opacity increase (Settings → Display & Brightness → Liquid Glass)

Environment Values

@Environment(\.accessibilityReduceTransparency) var reduceTransparency
@Environment(\.accessibilityReduceMotion) var reduceMotion

var body: some View {
    Text("Accessible")
        .padding()
        .glassEffect(reduceTransparency ? .identity : .regular)
}

Best Practice: Let system handle accessibility automatically. Don't override unless absolutely necessary.

Part 2: Intermediate Techniques

2.1 GlassEffectContainer

Purpose

• Combines multiple Liquid Glass shapes into unified composition
• Improves rendering performance by sharing sampling region
• Enables morphing transitions between glass elements
• Critical Rule: Glass cannot sample other glass; container provides shared sampling region

Basic Usage

GlassEffectContainer {
    HStack(spacing: 20) {
        Image(systemName: "pencil")
            .frame(width: 44, height: 44)
            .glassEffect(.regular.interactive())

        Image(systemName: "eraser")
            .frame(width: 44, height: 44)
            .glassEffect(.regular.interactive())
    }
}

With Spacing Control

GlassEffectContainer(spacing: 40.0) {
    // Glass elements within 40 points will morph together
    ForEach(icons) { icon in
        IconView(icon)
            .glassEffect()
    }
}

Spacing Parameter: Controls morphing threshold - elements within this distance visually blend and morph together during transitions.

API Signature

struct GlassEffectContainer<Content: View>: View {
    init(spacing: CGFloat? = nil, @ViewBuilder content: () -> Content)
    init(@ViewBuilder content: () -> Content)
}

2.2 Morphing Transitions with glassEffectID

Requirements for Morphing:

1. Elements in same GlassEffectContainer
2. Each view has glassEffectID with shared namespace
3. Views conditionally shown/hidden trigger morphing
4. Animation applied to state changes

Basic Morphing Setup

struct MorphingExample: View {
    @State private var isExpanded = false
    @Namespace private var namespace

    var body: some View {
        GlassEffectContainer(spacing: 30) {
            Button(isExpanded ? "Collapse" : "Expand") {
                withAnimation(.bouncy) {
                    isExpanded.toggle()
                }
            }
            .glassEffect()
            .glassEffectID("toggle", in: namespace)

            if isExpanded {
                Button("Action 1") { }
                    .glassEffect()
                    .glassEffectID("action1", in: namespace)

                Button("Action 2") { }
                    .glassEffect()
                    .glassEffectID("action2", in: namespace)
            }
        }
    }
}

API Signature

func glassEffectID<ID: Hashable>(
    _ id: ID,
    in namespace: Namespace.ID
) -> some View

Advanced Morphing Pattern - Expandable Action Menu

struct ActionButtonsView: View {
    @State private var showActions = false
    @Namespace private var namespace

    var body: some View {
        ZStack {
            Image("background")
                .resizable()
                .ignoresSafeArea()

            GlassEffectContainer(spacing: 30) {
                VStack(spacing: 30) {
                    if showActions {
                        actionButton("rotate.right")
                            .glassEffectID("rotate", in: namespace)
                    }

                    HStack(spacing: 30) {
                        if showActions {
                            actionButton("circle.lefthalf.filled")
                                .glassEffectID("contrast", in: namespace)
                        }

                        actionButton(showActions ? "xmark" : "slider.horizontal.3") {
                            withAnimation(.bouncy) {
                                showActions.toggle()
                            }
                        }
                        .glassEffectID("toggle", in: namespace)

                        if showActions {
                            actionButton("flip.horizontal")
                                .glassEffectID("flip", in: namespace)
                        }
                    }

                    if showActions {
                        actionButton("crop")
                            .glassEffectID("crop", in: namespace)
                    }
                }
            }
        }
    }

    @ViewBuilder
    func actionButton(_ systemImage: String, action: (() -> Void)? = nil) -> some View {
        Button {
            action?()
        } label: {
            Image(systemName: systemImage)
                .frame(width: 44, height: 44)
        }
        .buttonStyle(.glass)
        .buttonBorderShape(.circle)
    }
}

2.3 Glass Button Styles

Button Style Types

| Style | Appearance | Use Case | |-------|------------|----------| | .glass | Translucent, see-through | Secondary actions | | .glassProminent | Opaque, no background show-through | Primary actions |

Basic Implementation

// Secondary action
Button("Cancel") { }
    .buttonStyle(.glass)

// Primary action
Button("Save") { }
    .buttonStyle(.glassProminent)
    .tint(.blue)

With Customization

Button("Action") { }
    .buttonStyle(.glass)
    .tint(.purple)
    .controlSize(.large)
    .buttonBorderShape(.circle)

Available Control Sizes

.controlSize(.mini)
.controlSize(.small)
.controlSize(.regular)  // Default
.controlSize(.large)
.controlSize(.extraLarge)  // New in iOS 26

Border Shapes

.buttonBorderShape(.capsule)     // Default
.buttonBorderShape(.roundedRectangle(radius: 8))
.buttonBorderShape(.circle)

2.4 Toolbar Integration

Automatic Glass Styling Toolbars automatically receive Liquid Glass treatment in iOS 26:

NavigationStack {
    ContentView()
        .toolbar {
            ToolbarItem(placement: .cancellationAction) {
                Button("Cancel", systemImage: "xmark") { }
            }

            ToolbarItem(placement: .confirmationAction) {
                Button("Done", systemImage: "checkmark") { }
            }
        }
}

Automatic Behaviors:

• Prioritizes symbols over text
• .confirmationAction automatically gets .glassProminent style
• Floating glass appearance
• Grouped layouts with visual separation

Toolbar Grouping with Spacing

.toolbar {
    ToolbarItemGroup(placement: .topBarTrailing) {
        Button("Draw", systemImage: "pencil") { }
        Button("Erase", systemImage: "eraser") { }
    }

    ToolbarSpacer(.fixed, spacing: 20)  // New in iOS 26

    ToolbarItem(placement: .topBarTrailing) {
        Button("Save", systemImage: "checkmark") { }
            .buttonStyle(.glassProminent)
    }
}

ToolbarSpacer Types

ToolbarSpacer(.fixed, spacing: 20)   // Fixed space
ToolbarSpacer(.flexible)              // Flexible space (pushes items apart)

2.5 TabView with Liquid Glass

Basic TabView Automatically adopts Liquid Glass when compiled with Xcode 26:

TabView {
    Tab("Home", systemImage: "house") {
        HomeView()
    }
    Tab("Settings", systemImage: "gear") {
        SettingsView()
    }
}

Search Tab Role Creates floating search button at bottom-right (reachability optimization):

struct ContentView: View {
    @State private var searchText = ""

    var body: some View {
        TabView {
            Tab("Home", systemImage: "house") {
                HomeView()
            }

            Tab("Search", systemImage: "magnifyingglass", role: .search) {
                NavigationStack {
                    SearchView()
                }
            }
        }
        .searchable(text: $searchText)
    }
}

Tab Bar Minimize Behavior

TabView {
    // tabs...
}
.tabBarMinimizeBehavior(.onScrollDown)  // Collapses during scroll

Options:

• .automatic - System determines
• .onScrollDown - Minimizes when scrolling
• .never - Always full size

Tab View Bottom Accessory Adds persistent glass view above tab bar:

TabView {
    // tabs...
}
.tabViewBottomAccessory {
    HStack {
        Image(systemName: "play.fill")
        Text("Now Playing")
        Spacer()
    }
    .padding()
}

2.6 Sheet Presentations

Automatic Glass Background Sheets in iOS 26 automatically receive inset Liquid Glass background:

.sheet(isPresented: $showSheet) {
    SheetContent()
        .presentationDetents([.medium, .large])
}

Sheet Morphing from Toolbar

struct ContentView: View {
    @Namespace private var transition
    @State private var showInfo = false

    var body: some View {
        NavigationStack {
            ContentView()
                .toolbar {
                    ToolbarItem(placement: .bottomBar) {
                        Button("Info", systemImage: "info") {
                            showInfo = true
                        }
                        .matchedTransitionSource(id: "info", in: transition)
                    }
                }
                .sheet(isPresented: $showInfo) {
                    InfoSheet()
                        .navigationTransition(.zoom(sourceID: "info", in: transition))
                }
        }
    }
}

2.7 NavigationSplitView Integration

Automatic Floating Sidebar

NavigationSplitView {
    List(items) { item in
        NavigationLink(item.name, value: item)
    }
    .navigationTitle("Items")
} detail: {
    DetailView()
}

Sidebar automatically receives floating Liquid Glass with ambient reflection.

Part 3: Advanced Implementation

3.1 glassEffectUnion

Purpose: Manually combine glass effects that are too distant to merge via spacing alone.

API Signature

func glassEffectUnion<ID: Hashable>(
    id: ID,
    namespace: Namespace.ID
) -> some View

Example

struct UnionExample: View {
    @Namespace var controls

    var body: some View {
        GlassEffectContainer {
            VStack(spacing: 0) {
                Button("Edit") { }
                    .buttonStyle(.glass)
                    .glassEffectUnion(id: "tools", namespace: controls)

                Spacer().frame(height: 100)  // Large gap

                Button("Delete") { }
                    .buttonStyle(.glass)
                    .glassEffectUnion(id: "tools", namespace: controls)
            }
        }
    }
}

3.2 glassEffectTransition

API Signature

func glassEffectTransition(
    _ transition: GlassEffectTransition,
    isEnabled: Bool = true
) -> some View

enum GlassEffectTransition {
    case identity        // No changes
    case matchedGeometry // Matched geometry transition (default)
    case materialize     // Material appearance transition
}

3.3 Complex Multi-Element Compositions

Floating Action Cluster

struct FloatingActionCluster: View {
    @State private var isExpanded = false
    @Namespace private var namespace

    let actions = [
        ("home", Color.purple),
        ("pencil", Color.blue),
        ("message", Color.green),
        ("envelope", Color.orange)
    ]

    var body: some View {
        ZStack {
            ContentView()

            VStack {
                Spacer()
                HStack {
                    Spacer()
                    cluster
                        .padding()
                }
            }
        }
    }

    var cluster: some View {
        GlassEffectContainer(spacing: 20) {
            VStack(spacing: 12) {
                if isExpanded {
                    ForEach(actions, id: \.0) { action in
                        actionButton(action.0, color: action.1)
                            .glassEffectID(action.0, in: namespace)
                    }
                }

                Button {
                    withAnimation(.bouncy(duration: 0.4)) {
                        isExpanded.toggle()
                    }
                } label: {
                    Image(systemName: isExpanded ? "xmark" : "plus")
                        .font(.title2.bold())
                        .frame(width: 56, height: 56)
                }
                .buttonStyle(.glassProminent)
                .buttonBorderShape(.circle)
                .tint(.blue)
                .glassEffectID("toggle", in: namespace)
            }
        }
    }

    func actionButton(_ icon: String, color: Color) -> some View {
        Button {
            // action
        } label: {
            Image(systemName: icon)
                .font(.title3)
                .frame(width: 48, height: 48)
        }
        .buttonStyle(.glass)
        .buttonBorderShape(.circle)
        .tint(color)
    }
}

3.4 Symbol Effects Integration

Smooth Icon Transitions

struct SymbolGlassButton: View {
    @State private var isLiked = false

    var body: some View {
        Button {
            isLiked.toggle()
        } label: {
            Image(systemName: isLiked ? "heart.fill" : "heart")
                .font(.title)
                .frame(width: 60, height: 60)
        }
        .glassEffect(.regular.interactive())
        .contentTransition(.symbolEffect(.replace))
        .tint(isLiked ? .red : .primary)
    }
}

3.5 Performance Optimization

Best Practices:

1. Always Use GlassEffectContainer for Multiple Elements

// ✅ GOOD - Efficient rendering
GlassEffectContainer {
    HStack {
        Button("Edit") { }.glassEffect()
        Button("Delete") { }.glassEffect()
    }
}

// ❌ BAD - Inefficient, inconsistent sampling
HStack {
    Button("Edit") { }.glassEffect()
    Button("Delete") { }.glassEffect()
}

2. Conditional Glass with .identity

.glassEffect(shouldShowGlass ? .regular : .identity)

No layout recalculation when toggling.

3. Limit Continuous Animations Let glass rest in steady states.

4. Test on Older Devices

• iPhone 11-13: May show lag
• Profile with Instruments for GPU usage
• Monitor thermal performance

3.6 Dynamic Glass Adaptation

Automatic Color Scheme Switching Glass automatically adapts between light/dark based on background:

ScrollView {
    Color.black.frame(height: 400)  // Glass becomes light
    Color.white.frame(height: 400)  // Glass becomes dark
}
.safeAreaInset(edge: .bottom) {
    ControlPanel()
        .glassEffect()  // Automatically adapts
}

Adaptive Behaviors:

• Small elements (nav bars, tab bars): Flip between light/dark
• Large elements (sidebars, menus): Adapt but don't flip (would be jarring)
• Shadows: Opacity increases over text, decreases over white backgrounds
• Tint: Adjusts hue, brightness, saturation for legibility

3.7 Gesture Integration

Drag Gesture with Glass

struct DraggableGlassButton: View {
    @State private var offset = CGSize.zero
    @State private var isDragging = false

    var body: some View {
        Button("Drag Me") { }
            .glassEffect(.regular.interactive())
            .offset(offset)
            .scaleEffect(isDragging ? 1.1 : 1.0)
            .gesture(
                DragGesture()
                    .onChanged { value in
                        isDragging = true
                        offset = value.translation
                    }
                    .onEnded { _ in
                        withAnimation(.spring(response: 0.3, dampingFraction: 0.6)) {
                            isDragging = false
                            offset = .zero
                        }
                    }
            )
    }
}

Part 4: Edge Cases & Advanced Topics

4.1 Handling Complex Background Content

The Readability Problem Liquid Glass over busy, colorful, or animated content causes readability issues.

Solution 1: Gradient Fade

struct TabBarFadeModifier: ViewModifier {
    let fadeLocation: CGFloat = 0.4
    let opacity: CGFloat = 0.85
    let backgroundColor: Color = Color(.systemBackground)

    func body(content: Content) -> some View {
        GeometryReader { geometry in
            ZStack {
                content

                if geometry.safeAreaInsets.bottom > 10 {
                    let dynamicHeight = geometry.safeAreaInsets.bottom

                    VStack {
                        Spacer()
                        LinearGradient(
                            gradient: Gradient(stops: [
                                .init(color: .clear, location: 0.0),
                                .init(color: backgroundColor.opacity(opacity), location: fadeLocation)
                            ]),
                            startPoint: .top,
                            endPoint: .bottom
                        )
                        .frame(height: dynamicHeight)
                        .allowsHitTesting(false)
                        .offset(y: geometry.safeAreaInsets.bottom)
                    }
                }
            }
        }
    }
}

extension View {
    func deliquify() -> some View {
        self.modifier(TabBarFadeModifier())
    }
}

Solution 2: Strategic Tinting

.glassEffect(.regular.tint(.purple.opacity(0.8)))

Solution 3: Background Dimming

ZStack {
    BackgroundImage()
        .overlay(Color.black.opacity(0.3))  // Subtle dimming

    GlassControls()
        .glassEffect(.clear)
}

4.2 Glass Layering Guidelines

Avoid Glass-on-Glass

// ❌ BAD - Confusing visual hierarchy
VStack {
    HeaderView().glassEffect()
    ContentView().glassEffect()
    FooterView().glassEffect()
}

// ✅ GOOD - Clear separation
ZStack {
    ContentView()  // No glass
    HeaderView().glassEffect()  // Single floating layer
}

Proper Layering Philosophy:

1. Content layer (bottom) - No glass
2. Navigation layer (middle) - Liquid Glass
3. Overlay layer (top) - Vibrancy and fills on glass

4.3 Platform Differences

| Platform | Adaptations | |----------|-------------| | iOS | Floating tab bars, bottom search placement | | iPadOS | Floating sidebars, ambient reflection, larger shadows | | macOS | Concentric window corners, adaptive search bars, taller controls | | watchOS | Location-aware widgets, fluid navigation | | tvOS | Focused glass effects, directional highlights |

Minimum Requirements:

• iOS 26.0+, iPadOS 26.0+, macOS Tahoe (26.0)+, watchOS 26.0+, tvOS 26.0+, visionOS 26.0+
• Xcode 26.0+

Device Support:

• iOS 26: iPhone 11 or iPhone SE (2nd gen) or later
• Older devices: Receive frosted glass fallback with reduced effects

4.4 Backward Compatibility

Automatic Adoption Simply recompile with Xcode 26 - no code changes required for basic adoption.

Temporary Opt-Out (expires iOS 27)

<!-- Info.plist -->
<key>UIDesignRequiresCompatibility</key>
<true/>

Custom Compatibility Extension

extension View {
    @ViewBuilder
    func glassedEffect(
        in shape: some Shape = Capsule(),
        interactive: Bool = false
    ) -> some View {
        if #available(iOS 26.0, *) {
            let glass = interactive ? Glass.regular.interactive() : .regular
            self.glassEffect(glass, in: shape)
        } else {
            self
                .background(
                    shape
                        .fill(.ultraThinMaterial)
                        .overlay(
                            LinearGradient(
                                colors: [.white.opacity(0.3), .clear],
                                startPoint: .topLeading,
                                endPoint: .bottomTrailing
                            )
                        )
                        .overlay(shape.stroke(.white.opacity(0.2), lineWidth: 1))
                )
        }
    }
}

4.5 UIKit Integration

UIGlassEffect

import UIKit

let glassEffect = UIGlassEffect(
    glass: .regular,
    isInteractive: true
)

let effectView = UIVisualEffectView(effect: glassEffect)
effectView.frame = CGRect(x: 0, y: 0, width: 200, height: 50)
view.addSubview(effectView)

4.6 Known Issues & Workarounds

Issue 1: Interactive Shape Mismatch Problem: .glassEffect(.regular.interactive(), in: RoundedRectangle()) responds with Capsule shape Workaround: Use .buttonStyle(.glass) for buttons instead

Issue 2: glassProminent Circle Artifacts Workaround:

Button("Action") { }
    .buttonStyle(.glassProminent)
    .buttonBorderShape(.circle)
    .clipShape(Circle())  // Fixes artifacts

4.7 Performance Implications

Battery Impact

• iOS 26: 13% battery drain vs. 1% in iOS 18 (iPhone 16 Pro Max testing)
• Increased heat generation
• Higher CPU/GPU load on older devices

Optimization Strategies:

1. Use GlassEffectContainer for multiple elements
2. Limit continuous animations
3. Let glass rest in steady states
4. Test on 3-year-old devices
5. Profile with Instruments

Part 5: Best Practices & Design Patterns

5.1 When to Use Glass vs Traditional UI

Use Liquid Glass for:

• Navigation bars and toolbars
• Tab bars and bottom accessories
• Floating action buttons
• Sheets, popovers, and menus
• Context-sensitive controls
• System-level alerts

Avoid Liquid Glass for:

• Content layer (lists, tables, media)
• Full-screen backgrounds
• Scrollable content
• Stacked glass layers
• Every UI element

Apple's Guidance: "Liquid Glass is best reserved for the navigation layer that floats above the content of your app."

5.2 Design Principles

Hierarchy

• Content = Primary
• Glass controls = Secondary functional layer
• Overlay fills/vibrancy = Tertiary

Contrast Management

• Maintain 4.5:1 minimum contrast ratio
• Test legibility across backgrounds
• Use vibrant text on glass
• Add subtle borders for definition

Tinting Philosophy

• Use selectively for primary actions
• Avoid tinting everything
• Tint conveys meaning, not decoration

5.3 Anti-Patterns

Visual Anti-Patterns:

1. Overuse - glass everywhere
2. Glass-on-glass stacking
3. Content layer glass
4. Tinting everything
5. Breaking concentricity

Technical Anti-Patterns:

1. Custom opacity bypassing accessibility
2. Ignoring safe areas
3. Hard-coded color schemes
4. Mixing Regular and Clear variants
5. Multiple separate glass effects without container

Usability Anti-Patterns:

1. Busy backgrounds without dimming
2. Insufficient contrast
3. Excessive animations
4. Breaking iOS conventions
5. Prioritizing aesthetics over usability

Part 6: API Quick Reference

Core Modifiers

// Basic glass effect
.glassEffect() -> some View
.glassEffect(_ glass: Glass, in shape: some Shape, isEnabled: Bool) -> some View

// Glass effect ID for morphing
.glassEffectID<ID: Hashable>(_ id: ID, in namespace: Namespace.ID) -> some View

// Glass effect union
.glassEffectUnion<ID: Hashable>(id: ID, namespace: Namespace.ID) -> some View

// Glass effect transition
.glassEffectTransition(_ transition: GlassEffectTransition, isEnabled: Bool) -> some View

Glass Types

Glass.regular              // Default adaptive variant
Glass.clear                // High transparency variant
Glass.identity             // No effect

// Modifiers
.tint(_ color: Color)      // Add color tint
.interactive()             // Enable interactive behaviors (iOS only)

Button Styles

.buttonStyle(.glass)            // Translucent glass button
.buttonStyle(.glassProminent)   // Opaque prominent button

Container

GlassEffectContainer {
    // Content with .glassEffect() views
}

GlassEffectContainer(spacing: CGFloat) {
    // Content with controlled morphing distance
}

Toolbar & Navigation

.toolbar { }                           // Automatic glass styling
ToolbarSpacer(.fixed, spacing: CGFloat)
ToolbarSpacer(.flexible)
.badge(Int)                            // Badge count
.sharedBackgroundVisibility(.hidden)   // Hide glass background

TabView

.tabBarMinimizeBehavior(.onScrollDown)
.tabBarMinimizeBehavior(.automatic)
.tabBarMinimizeBehavior(.never)
.tabViewBottomAccessory { }

Resources

Official Apple Documentation

WWDC 2025 Sessions:

• Session 219: Meet Liquid Glass
• Session 323: Build a SwiftUI app with the new design
• Session 356: Get to know the new design system

Sample Code:

• Landmarks: Building an app with Liquid Glass
• Refining toolbar glass effects

Community Resources

GitHub Repositories:

• mertozseven/LiquidGlassSwiftUI
• GonzaloFuentes28/LiquidGlassCheatsheet
• GetStream/awesome-liquid-glass
• artemnovichkov/iOS-26-by-Examples

Developer Blogs:

• Donny Wals: "Designing custom UI with Liquid Glass on iOS 26"
• Swift with Majid: Glassifying custom views series
• Create with Swift: Design principles guide

Key Takeaways:

1. Reserve Liquid Glass for navigation layer only
2. Always use GlassEffectContainer for multiple glass elements
3. Test extensively with accessibility settings enabled
4. Monitor performance on older devices
5. Respect user preferences and system settings
6. Prioritize content legibility over visual effects
7. Use morphing transitions for smooth state changes
8. Follow Apple's design guidelines and HIG