ios26-liquid-glass

Liquid Glass — Apple's New Material Design System

When to Use This Skill

Use when:

Implementing Liquid Glass effects in your app Reviewing existing UI for Liquid Glass adoption opportunities Debugging visual artifacts with Liquid Glass materials Optimizing Liquid Glass performance Requesting expert review of Liquid Glass implementation Understanding when to use Regular vs Clear variants Troubleshooting tinting, legibility, or adaptive behavior issues Related Skills

Use liquid-glass-ref for comprehensive app-wide adoption guidance (app icons, controls, navigation, menus, windows, platform considerations) Example Prompts

These are real questions developers ask that this skill is designed to answer:

1. "I just saw Liquid Glass in WWDC videos. How is it different from blur effects I've used before? Should I adopt it?"

→ The skill explains Liquid Glass as a lensing-based material (not blur), shows design philosophy, and when adoption makes sense

2. "I'm implementing Liquid Glass in my app but the lensing effect doesn't look quite right. It looks like a regular blur. What am I missing?"

→ The skill covers the visual properties (lensing vs motion vs environment), Regular vs Clear variants, and debugging visual artifacts

3. "Liquid Glass works great on iPhone but looks odd on iPad. Should I adjust the implementation differently for different screen sizes?"

→ The skill demonstrates adaptive Liquid Glass patterns and platform-specific guidance (iOS 26+, macOS Tahoe+, visionOS 3+)

4. "I need to use Liquid Glass but still need legible text on top. How do I ensure text contrast while using Liquid Glass?"

→ The skill covers tinting strategies, adaptive color choices, and opacity patterns for maintaining readability across light/dark modes

5. "We want to do a design review of our Liquid Glass implementation. What are the expert criteria for a good Liquid Glass implementation?"

→ The skill provides the comprehensive review checklist and professional push-back frameworks for design review meetings

What is Liquid Glass?

Liquid Glass is Apple's next-generation material design system introduced at WWDC 2025. It represents a significant evolution from previous materials (Aqua, iOS 7 blurs, Dynamic Island) by creating a new digital meta-material that:

Dynamically bends and shapes light (lensing) rather than scattering it Moves organically like a lightweight liquid, responding to touch and app dynamism Adapts automatically to size, environment, content, and light/dark modes Unifies design language across all Apple platforms (iOS, iPadOS, macOS, visionOS) Core Philosophy: Liquid Glass complements the evolution of rounded, immersive screens with rounded, floating forms that feel natural to touch interaction while letting content shine through.

Visual Properties

1. Lensing (Primary Visual Characteristic) Liquid Glass defines itself through lensing — the warping and bending of light that communicates presence, motion, and form.

How it works:

Dynamically concentrates and shapes light in real-time Provides definition against background while feeling visually grounded Controls feel ultra-lightweight and transparent while visually distinguishable Elements materialize in/out by modulating light bending (not fading) Design Implication: Unlike previous materials that scattered light, Liquid Glass uses instinctive visual cues from the natural world to provide separation.

2. Motion & Fluidity Motion and visuals were designed as one unified experience:

Instant flex and energize — Responds to interaction by flexing with light Gel-like flexibility — Communicates transient, malleable nature Moves in tandem with interaction — Aligns with dynamism of thinking and movement Temporary lift — Elements can lift into Liquid Glass on interaction (great for controls) Dynamic morphing — Continuously shape-shifts between app states as a singular floating plane Lightweight transitions — Menus pop open in-line, maintaining clear relationship to source 3. Adaptive Behavior Liquid Glass continuously adapts without fixed light/dark appearance:

Content-aware adaptation:

Shadows become more prominent when text scrolls underneath Tint and dynamic range shift to ensure legibility Independently switches light/dark to feel at home in any context Larger elements (menus, sidebars) simulate thicker material with deeper shadows and richer lensing Platform adaptation:

Nests perfectly into rounded corners of windows Forms distinct functional layer for controls/navigation Ambient environment (colorful content nearby) subtly spills onto surface Light reflects, scatters, and bleeds into shadows Implementation Guide

Basic API Usage SwiftUI: glassEffect Modifier

// Basic usage - applies glass within capsule shape Text("Hello") .glassEffect()

// Custom shape Text("Hello") .glassEffect(in: RoundedRectangle(cornerRadius: 12))

// Interactive elements (iOS - for controls/containers) Button("Tap Me") { // action } .glassEffect() .interactive() // Add for custom controls on iOS Automatic Adoption: Simply recompiling with Xcode 26 brings Liquid Glass to standard controls automatically.

Variants: Regular vs Clear CRITICAL DECISION: Never mix Regular and Clear in the same interface.

Regular Variant (Default — Use Most Often)

Characteristics:

Most versatile, use in 95% of cases Full visual and adaptive effects Provides legibility regardless of context Works in any size, over any content Anything can be placed on top When to use: Navigation bars, tab bars, toolbars, buttons, menus, sidebars

// Regular is the default NavigationView { // Content } .glassEffect() // Uses Regular variant Clear Variant (Special Cases Only)

Characteristics:

Permanently more transparent No adaptive behaviors Allows content richness to interact with glass Requires dimming layer for legibility Use ONLY when ALL three conditions are met:

✅ Element is over media-rich content ✅ Content layer won't be negatively affected by dimming layer ✅ Content above glass is bold and bright // Clear variant with localized dimming for small footprints ZStack { MediaRichBackground() .overlay(.black.opacity(0.3)) // Dimming layer

BoldBrightControl()
    .glassEffect(.clear)

} ⚠️ WARNING: Using Clear without meeting all three conditions results in poor legibility.

Layered System Architecture

Liquid Glass is composed of multiple layers working together:

1. Highlights Layer Light sources shine on material, producing highlights responding to geometry Lights move during interactions (lock/unlock), defining silhouette Some cases respond to device motion (feels aware of position in real world)
2. Shadows Layer Aware of background content Increases shadow opacity over text for separation Lowers shadow opacity over solid light backgrounds Ensures elements are always easy to spot
3. Internal Glow (Interaction Feedback) Material illuminates from within on interaction Glow starts under fingertips, spreads throughout element Spreads to nearby Liquid Glass elements Interacts with flexible properties - feels natural and fluid Makes interface feel alive and connected to physical world
4. Adaptive Tinting Layer Multiple layers adapt together to maintain hierarchy Windows losing focus visually recede (Mac/iPad) All behaviors come built-in automatically Design Principles & Best Practices

✅ DO: Reserve for Navigation Layer Correct Usage:

[Content Layer — No Glass] ↓ [Navigation Layer — Liquid Glass] • Tab bars • Navigation bars • Toolbars • Floating controls Why: Liquid Glass floats above content, creating clear hierarchy.

❌ DON'T: Use on Content Layer Wrong:

// DON'T apply to table views, lists, or content List(items) { item in Text(item.name) } .glassEffect() // ❌ Competes with navigation, muddy hierarchy Why: Makes elements compete, creates visual confusion.

❌ DON'T: Stack Glass on Glass Wrong:

ZStack { NavigationBar() .glassEffect() // ❌

FloatingButton()
    .glassEffect() // ❌ Glass on glass

} Correct:

ZStack { NavigationBar() .glassEffect()

FloatingButton()
    .foregroundStyle(.primary) // Use fills, transparency, vibrancy
    // Feels like thin overlay part of the material

} ✅ DO: Avoid Content Intersections in Steady State Wrong: Content intersects with Liquid Glass when app launches

Correct: Reposition or scale content to maintain separation in steady states

Why: Prevents unwanted visual noise; intersections acceptable during scrolling/transitions.

Scroll Edge Effects

Work in concert with Liquid Glass to maintain separation and legibility with scrolling content.

How they work:

Content begins scrolling → effect gently dissolves content into background Lifts glass visually above moving content Floating elements (titles) remain clear Darker content triggers dark style → subtle dimming for contrast Hard Style Effect Use when pinned accessory views exist (e.g., column headers):

ScrollView { // Content } .scrollEdgeEffect(.hard) // Uniform across toolbar + pinned accessories When to use: Extra visual separation between floating elements in accessory view and scrolling content.

Tinting & Color

New Tinting System Liquid Glass introduces adaptive tinting that respects material principles and maximizes legibility.

How it works:

Selecting color generates range of tones Tones mapped to content brightness underneath element Inspired by colored glass in reality Changes hue, brightness, saturation based on background Doesn't deviate too much from intended color Compatible with all glass behaviors (morphing, adaptation, interaction).

Button("Primary Action") { // action } .tint(.red) // Adaptive tinting automatically applied .glassEffect() Tinting Best Practices ✅ DO: Use for Primary Actions

// Good — Emphasizes primary action Button("View Bag") { // action } .tint(.red) .glassEffect() ❌ DON'T: Tint Everything

// Wrong — When everything is tinted, nothing stands out VStack { Button("Action 1").tint(.blue).glassEffect() Button("Action 2").tint(.green).glassEffect() Button("Action 3").tint(.purple).glassEffect() } // ❌ Confusing, no hierarchy Solution: Use color in content layer instead, reserve tinting for primary UI actions.

Solid Fills vs Tinting Solid fills break Liquid Glass character:

// ❌ Opaque, breaks visual character Button("Action") {} .background(.red) // Solid, opaque

// ✅ Transparent, grounded in environment Button("Action") {} .tint(.red) .glassEffect() Legibility & Contrast

Automatic Legibility Features Small elements (navbars, tabbars):

Constantly adapt appearance based on background Flip light/dark for discernibility Large elements (menus, sidebars):

Adapt based on context Don't flip light/dark (too distracting for large surface area) Symbols/glyphs:

Mirror glass behavior (flip light/dark) Maximize contrast automatically All content on Regular variant receives this treatment Custom Colors Use selectively for distinct functional purpose:

// Selective tinting for emphasis NavigationView { List { // Content } .toolbar { ToolbarItem { Button("Important") {} .tint(.orange) // Brings attention } } } Applies to: Labels, text, fully tinted buttons, time on lock screen, etc.

Accessibility

Liquid Glass offers several accessibility features that modify material without sacrificing its magic:

Reduced Transparency Makes Liquid Glass frostier Obscures more content behind it Applied automatically when system setting enabled Increased Contrast Makes elements predominantly black or white Highlights with contrasting border Applied automatically when system setting enabled Reduced Motion Decreases intensity of effects Disables elastic properties Applied automatically when system setting enabled Developer Action Required: None - all features available automatically when using Liquid Glass.

Performance Considerations

View Hierarchy Impact Concern: Liquid Glass rendering cost in complex view hierarchies

Guidance:

Regular variant optimized for performance Larger elements (menus, sidebars) use more pronounced effects but managed by system Avoid excessive nesting of glass elements Optimization:

// ❌ Avoid deep nesting ZStack { GlassContainer1() .glassEffect() ZStack { GlassContainer2() .glassEffect() // More nesting... } }

// ✅ Flatten hierarchy VStack { GlassContainer1() .glassEffect()

GlassContainer2()
    .glassEffect()

} Rendering Costs Adaptive behaviors have computational cost:

Light/dark switching Shadow adjustments Tint calculations Lensing effects System handles optimization, but be mindful:

Don't animate Liquid Glass elements unnecessarily Use Clear variant sparingly (requires dimming layer computation) Profile with Instruments if experiencing performance issues Testing Liquid Glass

Visual Regression Testing Capture screenshots in multiple states:

func testLiquidGlassAppearance() { let app = XCUIApplication() app.launch()

// Test light mode
XCTContext.runActivity(named: "Light Mode Glass") { _ in
    let screenshot = app.screenshot()
    // Compare with baseline
}

// Test dark mode
app.launchArguments = ["-UIUserInterfaceStyle", "dark"]
app.launch()

XCTContext.runActivity(named: "Dark Mode Glass") { _ in
    let screenshot = app.screenshot()
    // Compare with baseline
}

} Test Across Configurations Critical test cases:

✅ Light mode vs dark mode ✅ Different color schemes (environment) ✅ Reduced Transparency enabled ✅ Increased Contrast enabled ✅ Reduced Motion enabled ✅ Dynamic Type (larger text sizes) ✅ Content scrolling (verify scroll edge effects) ✅ Right-to-left languages Accessibility Testing func testLiquidGlassAccessibility() { // Enable accessibility features via launch arguments app.launchArguments += [ "-UIAccessibilityIsReduceTransparencyEnabled", "1", "-UIAccessibilityButtonShapesEnabled", "1", "-UIAccessibilityIsReduceMotionEnabled", "1" ]

// Verify glass still functional and legible
XCTAssertTrue(glassElement.exists)
XCTAssertTrue(glassElement.isHittable)

} Design Review Pressure: Defending Your Implementation

The Problem Under design review pressure, you'll face requests to:

"Use Clear variant everywhere — Regular is too opaque" "Glass on all controls for visual cohesion" "More transparency to let content shine through" These sound reasonable. But they violate the framework. Your job: defend using evidence, not opinion.

Red Flags — Designer Requests That Violate Skill Guidelines If you hear ANY of these, STOP and reference the skill:

❌ "Use Clear everywhere" – Clear requires three specific conditions, not design preference ❌ "Glass looks better than fills" – Correct layer (navigation vs content) trumps aesthetics ❌ "Users won't notice the difference" – Clear variant fails legibility tests in low-contrast scenarios ❌ "Stack glass on glass for consistency" – Explicitly prohibited; use fills instead ❌ "Apply glass to Lists for sophistication" – Lists are content layer; causes visual confusion How to Push Back Professionally Step 1: Show the Framework

"I want to make this change, but let me show you Apple's guidance on Clear variant. It requires THREE conditions:

1. Media-rich content background
2. Dimming layer for legibility
3. Bold, bright controls on top

Let me show which screens meet all three..." Step 2: Demonstrate the Risk

Open the app on a device. Show:

Clear variant in low-contrast scenario (unreadable) Regular variant in same scenario (legible) Step 3: Offer Compromise

"Clear can work beautifully in these 6 hero sections where all three conditions apply. Regular handles everything else with automatic legibility. Best of both worlds." Step 4: Document the Decision

If overruled (designer insists on Clear everywhere):

Slack message to PM + designer:

"Design review decided to use Clear variant across all controls. Important: Clear variant requires legibility testing in low-contrast scenarios (bright sunlight, dark content). If we see accessibility issues after launch, we'll need an expedited follow-up. I'm flagging this proactively." Why this works

You're not questioning their taste (you like Clear too) You're raising accessibility/legibility risk You're offering a solution that preserves their vision in hero sections You're documenting the decision (protects you post-launch) Real-World Example: App Store Launch Blocker (36-Hour Deadline) Scenario

36 hours to launch Chief designer says: "Clear variant everywhere" Client watching the review meeting You already implemented Regular per the skill What to do

// In the meeting, demo side-by-side:

// Regular variant (current implementation) NavigationBar() .glassEffect() // Automatic legibility

// Clear variant (requested) NavigationBar() .glassEffect(.clear) // Requires dimming layer below

// Show the three-condition checklist // Demonstrate which screens pass/fail // Offer: Clear in hero sections, Regular elsewhere Result

30-minute compromise demo 90 minutes to implement changes Launch on schedule with optimal legibility No post-launch accessibility complaints When to Accept the Design Decision (Even If You Disagree) Sometimes designers have valid reasons to override the skill. Accept if:

They understand the three-condition framework They're willing to accept legibility risks You document the decision in writing They commit to monitoring post-launch feedback Document in Slack

"Design review decided to use Clear variant [in these locations]. We understand this requires:

• All three conditions met: [list them]
• Potential legibility issues in low-contrast scenarios
• Accessibility testing across brightness levels

Monitoring plan:

• Gather user feedback first 48 hours
• Run accessibility audit
• Have fallback to Regular variant ready for push if needed" This protects both of you and shows you're not blocking - just de-risking.

Expert Review Checklist

When reviewing Liquid Glass implementation (your code or others'), check:

1. Material Appropriateness Is Liquid Glass used only on navigation layer (not content)? Are standard controls getting glass automatically via Xcode 26 recompile? Is glass avoided on glass situations?
2. Variant Selection Is Regular variant used for most cases? If Clear variant used, do all three conditions apply? Over media-rich content? Dimming layer acceptable? Content above is bold and bright? Are Regular and Clear never mixed in same interface?
3. Legibility & Contrast Are primary actions selectively tinted (not everything)? Is color used in content layer for overall app color scheme? Are solid fills avoided on glass elements? Do elements maintain legibility on various backgrounds?
4. Layering & Hierarchy Are content intersections avoided in steady states? Are elements on top of glass using fills/transparency (not glass)? Is visual hierarchy clear (navigation layer vs content layer)?
5. Scroll Edge Effects Are scroll edge effects applied where Liquid Glass meets scrolling content? Is hard style used for pinned accessory views?
6. Accessibility Does implementation work with Reduced Transparency? Does implementation work with Increased Contrast? Does implementation work with Reduced Motion? Are interactive elements hittable in all configurations?
7. Performance Is view hierarchy reasonably flat? Are glass elements animated only when necessary? Is Clear variant used sparingly? Common Mistakes & Solutions

Mistake 1: Using Glass Everywhere Wrong:

List(landmarks) { landmark in LandmarkRow(landmark) .glassEffect() // ❌ } .glassEffect() // ❌ Correct:

NavigationView { List(landmarks) { landmark in LandmarkRow(landmark) // No glass } } .toolbar { ToolbarItem { Button("Add") {} .glassEffect() // ✅ Navigation layer only } } Why: Content layer should defer to Liquid Glass navigation layer.

Mistake 2: Clear Variant Without Dimming Wrong:

ZStack { VideoPlayer(player: player)

PlayButton()
    .glassEffect(.clear) // ❌ No dimming, poor legibility

} Correct:

ZStack { VideoPlayer(player: player) .overlay(.black.opacity(0.4)) // Dimming layer

PlayButton()
    .glassEffect(.clear) // ✅

} Mistake 3: Over-Tinting Wrong: All buttons tinted different colors

Correct: Primary action tinted, others use standard appearance

Mistake 4: Static Material Expectations Wrong: Assuming glass always looks the same (e.g., hardcoded shadows, fixed opacity)

Correct: Embrace adaptive behavior, test across light/dark modes and backgrounds

Troubleshooting

Visual Artifacts Issue: Glass appears too transparent or invisible

Check:

Are you using Clear variant? (Switch to Regular if inappropriate) Is background content extremely light or dark? (Glass adapts - this may be correct behavior) Is Reduced Transparency enabled? (Check accessibility settings) Issue: Glass appears opaque or has harsh edges

Check:

Are you using solid fills on glass? (Remove, use tinting) Is Increased Contrast enabled? (Expected behavior) Is custom shape too complex? (Simplify geometry) Dark Mode Issues Issue: Glass doesn't flip to dark style on dark backgrounds

Check:

Is element large (menu, sidebar)? (Large elements don't flip - by design) Is background actually dark? (Use Color Picker to verify) Are you overriding appearance? (Remove .preferredColorScheme() if unintended) Issue: Content on glass not legible in dark mode

Fix:

// Let SwiftUI handle contrast automatically Text("Label") .foregroundStyle(.primary) // ✅ Adapts automatically

// Don't hardcode colors Text("Label") .foregroundColor(.black) // ❌ Won't adapt to dark mode Performance Issues Issue: Scrolling feels janky with Liquid Glass

Debug:

Profile with Instruments (see swiftui-performance skill) Check for excessive view body updates Simplify view hierarchy under glass Verify not applying glass to content layer (major performance hit) Issue: Animations stuttering

Check:

Are you animating glass shape changes? (Expensive) Profile with SwiftUI Instrument for long view updates Consider reducing glass usage if critical path Migration from Previous Materials

From UIBlurEffect / NSVisualEffectView Before (UIKit):

let blurEffect = UIBlurEffect(style: .systemMaterial) let blurView = UIVisualEffectView(effect: blurEffect) view.addSubview(blurView) After (SwiftUI with Liquid Glass):

ZStack { // Content } .glassEffect() Benefits:

Automatic adaptation (no manual style switching) Built-in interaction feedback Platform-appropriate appearance Accessibility features included From Custom Materials If you've built custom translucent effects:

Try Liquid Glass first — may provide desired effect automatically Evaluate Regular vs Clear — Clear may match custom transparency needs Test across configurations — Liquid Glass adapts automatically Measure performance — Likely improvement over custom implementations When to keep custom materials:

Specific artistic effect not achievable with Liquid Glass Backward compatibility with iOS < 26 required Non-standard UI paradigm incompatible with Liquid Glass principles API Reference

SwiftUI Modifiers glassEffect(in:isInteractive:)

Applies Liquid Glass effect to view.

func glassEffect<S: Shape>( in shape: S = Capsule(), isInteractive: Bool = false ) -> some View Parameters:

shape: Shape defining glass bounds (default: Capsule()) isInteractive: On iOS, enables interactive mode for custom controls (default: false) Returns: View with Liquid Glass effect applied

Availability: iOS 26+, iPadOS 26+, macOS Tahoe+, visionOS 3+

Example:

// Default capsule shape Text("Hello").glassEffect()

// Custom shape Text("Hello").glassEffect(in: RoundedRectangle(cornerRadius: 16))

// Interactive (iOS) Button("Tap") {}.glassEffect(isInteractive: true) glassEffect(_:in:isInteractive:)

Applies specific Liquid Glass variant.

func glassEffect<S: Shape>( _ variant: GlassVariant, in shape: S = Capsule(), isInteractive: Bool = false ) -> some View Parameters:

variant: .regular or .clear shape: Shape defining glass bounds isInteractive: Interactive mode for custom controls (iOS) Example:

Text("Hello").glassEffect(.clear, in: Circle()) scrollEdgeEffect(_:)

Configures scroll edge appearance with Liquid Glass.

func scrollEdgeEffect(_ style: ScrollEdgeStyle) -> some View Parameters:

style: .automatic, .soft, or .hard Example:

ScrollView { // Content } .scrollEdgeEffect(.hard) // For pinned accessories scrollEdgeEffectStyle(_:for:) NEW in iOS 26

Optimizes legibility for controls when content scrolls beneath them.

func scrollEdgeEffectStyle(_ style: ScrollEdgeStyle, for edges: Edge.Set) -> some View Parameters:

style: .hard, .soft, or .automatic edges: Which edges to apply effect (.top, .bottom, .leading, .trailing) Use case: Custom bars with controls, text, or icons that have content scrolling beneath them. System bars (toolbars, navigation bars) adopt this automatically.

Example:

// Custom toolbar with controls CustomToolbar() .scrollEdgeEffectStyle(.hard, for: .top) // Maintain legibility

ScrollView { LazyVStack { ForEach(items) { item in ItemRow(item) } } } Availability: iOS 26+, iPadOS 26+, macOS Tahoe+

glassBackgroundEffect() NEW in iOS 26

Applies glass effect to custom views for reflecting surrounding content.

func glassBackgroundEffect() -> some View Use case: Apply Liquid Glass appearance to custom views (not buttons/controls) that should beautifully reflect surrounding content like photos.

Example:

struct PhotoGalleryView: View { var body: some View { CustomPhotoGrid() .glassBackgroundEffect() // Reflects surrounding photos } } Availability: iOS 26+, iPadOS 26+, macOS Tahoe+, visionOS 3+

Toolbar Modifiers NEW in iOS 26 .toolbar with Spacer(.fixed)

Separates toolbar button groups with fixed spacing.

.toolbar { ToolbarItemGroup(placement: .topBarTrailing) { Button("Up") { } Button("Down") { }

    Spacer(.fixed) // Fixed spacer separates groups

    Button("Settings") { }
}

} Why use .fixed: Creates logical visual separation between button groups. Default Spacer() is flexible and adjusts based on available space; .fixed maintains consistent separation.

Common pattern: Separate navigation buttons from action buttons, or primary actions from secondary actions.

Availability: iOS 26+, iPadOS 26+, macOS Tahoe+

.buttonStyle(.borderedProminent) + .tint() in Toolbars

Makes toolbar items more prominent with Liquid Glass tinting.

.toolbar { ToolbarItem(placement: .topBarTrailing) { Button("Add Trip") { addTrip() } .buttonStyle(.borderedProminent) .tint(.blue) // Liquid Glass toolbars support tinting } } Visual effect: Button appears with bordered prominent style and custom tint color, making it stand out against Liquid Glass toolbar background.

Best practice: Use for primary actions in toolbars. Don't over-tint - use for prominence, not decoration.

Availability: iOS 26+, iPadOS 26+, macOS Tahoe+

Navigation & Search NEW in iOS 26 Bottom-Aligned Search

Search automatically appears bottom-aligned on iPhone (more ergonomic), top-trailing on iPad.

NavigationSplitView { List { } .searchable(text: $searchText) } // Placement on NavigationSplitView automatically: // - Bottom-aligned on iPhone // - Top trailing corner on iPad No code changes required — existing .searchable() modifier automatically adopts platform-specific placement.

Why bottom-aligned: More ergonomic to reach on iPhone with thumb-based interaction.

Availability: iOS 26+, iPadOS 26+

Search Tab Role

Separates search tab from other tabs in tab bar, morphs into search field.

TabView { SearchView() .tabItem { Label("Search", systemImage: "magnifyingglass") } .tabRole(.search) // Separated from other tabs, morphs into search

TripsView()
    .tabItem { Label("Trips", systemImage: "map") }

} Visual effect: Search tab appears separated from other tabs in the tab bar. When tapped, morphs into the search field.

Use case: Tab-based apps where search is a primary destination.

Availability: iOS 26+

Controls and Layout NEW in iOS 26 containerRelativeShape()

Aligns control shapes with container curvature for visual continuity.

func containerRelativeShape(_ shape: ContainerRelativeShape) -> some View Parameters:

shape: Shape that aligns with container (e.g., .roundedRectangle) Use case: Create visual harmony by making controls concentric to their containers (sheets concentric to windows, controls concentric to sheets).

Example:

// Control shape aligns with container curvature Button("Action") { } .containerRelativeShape(.roundedRectangle) .glassEffect() Visual Effect Nested elements feel visually harmonious, with curvature matching container shape.

Availability: iOS 26+, iPadOS 26+, macOS Tahoe+

tabBarMinimizationBehavior(_:) NEW in iOS 26

Configures tab bar to minimize when scrolling to elevate underlying content.

func tabBarMinimizationBehavior(_ behavior: TabBarMinimizationBehavior) -> some View Parameters:

behavior: .onScrollDown, .onScrollUp, .automatic, or .never Use case: Content-focused apps (reading, media) where tab bar should recede during scrolling.

Example:

TabView { ContentView() .tabItem { Label("Home", systemImage: "house") } } .tabBarMinimizationBehavior(.onScrollDown) // Minimize when scrolling down Visual Effect Tab bar recedes when scrolling down, expands when scrolling up. Content gains more screen space.

Availability: iOS 26+

Types GlassVariant

enum GlassVariant { case regular // Default - full adaptive behavior case clear // More transparent, no adaptation } ScrollEdgeStyle

enum ScrollEdgeStyle { case automatic // System determines style case soft // Gradual fade case hard // Uniform effect across toolbar height } GlassEffectContainer NEW in iOS 26

Container for combining multiple Liquid Glass effects with optimized rendering performance.

struct GlassEffectContainer<Content: View>: View { init(@ViewBuilder content: () -> Content) } Use case When applying Liquid Glass effects to multiple custom elements. Optimizes performance and enables fluid morphing between glass shapes.

Example

// ✅ Combine effects in container for optimization GlassEffectContainer { HStack { Button("Action 1") { } .glassEffect()

    Button("Action 2") { }
        .glassEffect()

    Button("Action 3") { }
        .glassEffect()
}

} Benefits

Optimizes rendering performance Fluidly morphs Liquid Glass shapes into each other Reduces compositor overhead Better animation performance When to use

Multiple custom Liquid Glass elements Morphing animations between glass shapes Performance-critical interfaces Availability: iOS 26+, iPadOS 26+, macOS Tahoe+, visionOS 3+

Backward Compatibility

UIDesignRequiresCompatibility Key NEW in iOS 26 To ship with latest SDKs while maintaining previous appearance:

Add to Info.plist

UIDesignRequiresCompatibility Effect

App built with iOS 26 SDK Appearance matches iOS 18 and earlier Liquid Glass effects disabled Previous blur/material styles used When to use

Need time to audit interface changes Gradual adoption strategy Maintain exact appearance temporarily Migration strategy

Ship with UIDesignRequiresCompatibility enabled Audit interface changes in separate build Update interface incrementally Remove key when ready for Liquid Glass Availability: iOS 26+, iPadOS 26+

WWDC 2025 References

Primary Session:

Meet Liquid Glass — WWDC25 Session 219 Design principles and visual properties Adaptive behavior and platform integration Variants and usage guidelines Related Sessions:

Build a SwiftUI app with the new design — WWDC25 Session 323

Practical implementation patterns What's new in SwiftUI - WWDC25 Session 256

API overview and integration with SwiftUI ecosystem Documentation:

Adopting Liquid Glass Landmarks: Building an app with Liquid Glass Applying Liquid Glass to custom views Sample Code:

Landmarks tutorial series (WWDC 2025) Related Skills:

liquid-glass-ref - Comprehensive app-wide adoption guide (app icons, controls, navigation, menus, windows, platform considerations)