# iOS 26 Liquid Glass: Comprehensive Swift/SwiftUI Reference
A complete guide to Apple's most significant design evolution since iOS 7

category: Reference
date: 2025-11-16
reading-time: 17 min read
excerpt: Everything you need to know about implementing Liquid Glass in SwiftUI and UIKit — from basics through advanced morphing, performance optimization, and production patterns.

## Table of Contents
- Overview
- Part 1: Foundation & Basics
- Part 2: Intermediate Techniques
- Part 3: Advanced Implementation
- Part 4: Edge Cases & Advanced Topics
- Part 5: Best Practices & Design Patterns
- Part 6: API Quick Reference
- Resources

---


## 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**
```swift
import SwiftUI

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

**With Explicit Parameters**
```swift
Text("Custom Glass")
    .padding()
    .glassEffect(.regular, in: .capsule, isEnabled: true)
```

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

### 1.3 Glass Type Modifiers

**Core Structure**
```swift
struct Glass {
    static var regular: Glass
    static var clear: Glass
    static var identity: Glass

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

**Tinting**
```swift
// 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)
```swift
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**
```swift
.glassEffect(.regular.tint(.orange).interactive())
.glassEffect(.clear.interactive().tint(.blue))  // Order doesn't matter
```

### 1.4 Custom Shapes

**Available Shapes**
```swift
// 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:
```swift
// Automatically matches container/window corners
RoundedRectangle(cornerRadius: .containerConcentric, style: .continuous)
```

### 1.5 Text & Icons with Glass

**Text Rendering**
```swift
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**
```swift
Image(systemName: "heart.fill")
    .font(.largeTitle)
    .foregroundStyle(.white)
    .frame(width: 60, height: 60)
    .glassEffect(.regular.interactive())
```

**Labels**
```swift
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**
```swift
@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**
```swift
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**
```swift
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**
```swift
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**
```swift
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**
```swift
func glassEffectID<ID: Hashable>(
    _ id: ID,
    in namespace: Namespace.ID
) -> some View
```

**Advanced Morphing Pattern - Expandable Action Menu**
```swift
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**
```swift
// Secondary action
Button("Cancel") { }
    .buttonStyle(.glass)

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

**With Customization**
```swift
Button("Action") { }
    .buttonStyle(.glass)
    .tint(.purple)
    .controlSize(.large)
    .buttonBorderShape(.circle)
```

**Available Control Sizes**
```swift
.controlSize(.mini)
.controlSize(.small)
.controlSize(.regular)  // Default
.controlSize(.large)
.controlSize(.extraLarge)  // New in iOS 26
```

**Border Shapes**
```swift
.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:
```swift
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**
```swift
.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**
```swift
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:
```swift
TabView {
    Tab("Home", systemImage: "house") {
        HomeView()
    }
    Tab("Settings", systemImage: "gear") {
        SettingsView()
    }
}
```

**Search Tab Role**
Creates floating search button at bottom-right (reachability optimization):
```swift
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**
```swift
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:
```swift
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:
```swift
.sheet(isPresented: $showSheet) {
    SheetContent()
        .presentationDetents([.medium, .large])
}
```

**Sheet Morphing from Toolbar**
```swift
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**
```swift
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**
```swift
func glassEffectUnion<ID: Hashable>(
    id: ID,
    namespace: Namespace.ID
) -> some View
```

**Example**
```swift
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**
```swift
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**
```swift
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**
```swift
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**
```swift
// ✅ 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**
```swift
.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:
```swift
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**
```swift
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**
```swift
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**
```swift
.glassEffect(.regular.tint(.purple.opacity(0.8)))
```

**Solution 3: Background Dimming**
```swift
ZStack {
    BackgroundImage()
        .overlay(Color.black.opacity(0.3))  // Subtle dimming

    GlassControls()
        .glassEffect(.clear)
}
```

### 4.2 Glass Layering Guidelines

**Avoid Glass-on-Glass**
```swift
// ❌ 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)
```xml
<!-- Info.plist -->
<key>UIDesignRequiresCompatibility</key>
<true/>
```

**Custom Compatibility Extension**
```swift
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**
```swift
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**:
```swift
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

```swift
// 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

```swift
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

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

### Container

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

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

### Toolbar & Navigation

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

### TabView

```swift
.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