Ios Liquid Glass

Prisma-Labs-Dev/apple-skills/skills/ios-liquid-glass

by Prisma-Labs-Dev498626005e65783ebe8570a103b2335cf397768cNo licenseListed Oct 9, 2026Updated Oct 9, 2026

API reference: Liquid Glass (iOS 26+). Query for glass effects, navigation patterns, GlassEffect modifiers, design principles.

Instructions onlySoftware Development
AI-generated overview

Reference for Apple's Liquid Glass design system (iOS 26+), covering glass effects, containers, navigation and accessibility.

What it does
Provides an API reference for the Liquid Glass design system in iOS 26 and later, documenting glassEffect modifiers, glass variants, GlassEffectContainer, morphing transitions, navigation surfaces, SF Symbols effects, haptics and accessibility adaptations. It presents SwiftUI and UIKit code examples and Apple's stated design principles. It is documentation to consult, not a tool that produces files.
When to use it
Use it when implementing glass materials, glassEffect modifiers or GlassEffectContainer in an app, or when working with system glass navigation surfaces such as tabs, toolbars and sheets. It is also relevant when checking how glass adapts to accessibility settings or when creating app icons with Icon Composer.
Requirements
No scripts or packages; it is instructions and reference material only. The examples target SwiftUI and UIKit on iOS 26 or later.

iOS Liquid Glass Reference

API reference for the Liquid Glass design system (iOS 26+): glass effects, containers, morphing transitions, and related system behaviors. This documents what the system provides — design direction is yours.

When to Use

  • Implementing glass materials, glassEffect modifiers, or GlassEffectContainer
  • Navigation surfaces that use system glass (tabs, toolbars, sheets)
  • Checking how glass adapts to accessibility settings
  • Creating app icons with Icon Composer

Apple's Stated Design Principles

Apple describes Liquid Glass with three principles (reference, not a mandate):

PrincipleDescription
HierarchyControls float above content. Glass frames content rather than obscuring it.
HarmonySoftware design aligns with hardware — concentric corners, fluid gestures.
ConsistencyAdapts across iPhone, iPad, Mac — same identity, contextual expression.

One functional constraint worth knowing: glass is designed for the navigation/control layer. Applying it to content surfaces defeats its sampling model (see containers below).

Liquid Glass Core API

Basic Glass Effect

swift
import SwiftUI
// Simple glass applicationText("Action")    .padding()    .glassEffect() // .regular variant, .capsule shape
// With explicit parametersButton("Confirm") { }    .padding()    .glassEffect(.regular, in: RoundedRectangle(cornerRadius: 12), isEnabled: true)

Glass Variants

VariantUse Case
.regularToolbars, nav bars, tab bars, standard controls
.clearFloating controls over media (photos, maps, video)
.identityConditional disable: glassEffect(isActive ? .regular : .identity)

Glass Modifiers

swift
// Semantic tinting.glassEffect(.regular.tint(.accentColor))
// Interactive behaviors (scaling, shimmer, touch illumination).glassEffect(.regular.interactive())
// Combined.glassEffect(.regular.tint(.blue).interactive())

Custom Shapes

swift
// Standard shapes.glassEffect(.regular, in: .capsule).glassEffect(.regular, in: .circle).glassEffect(.regular, in: RoundedRectangle(cornerRadius: 16))
// Container-concentric (matches device/container corners).glassEffect(.regular, in: .rect(cornerRadius: .containerConcentric))

GlassEffectContainer & Morphing

Container Setup

Glass cannot sample other glass. Use containers for multiple glass elements:

swift
GlassEffectContainer(spacing: 30) {    HStack(spacing: 20) {        ForEach(actions) { action in            Button(action.title, systemImage: action.icon) { }                .frame(width: 44, height: 44)                .glassEffect(.regular.interactive())        }    }}

Morphing Transitions

swift
struct ExpandableActions: View {    @State private var isExpanded = false    @Namespace private var namespace
    var body: some View {        GlassEffectContainer(spacing: 30) {            VStack(spacing: 30) {                if isExpanded {                    ActionButton(icon: "rotate.right")                        .glassEffectID("rotate", in: namespace)                }
                HStack(spacing: 30) {                    if isExpanded {                        ActionButton(icon: "slider.horizontal.3")                            .glassEffectID("adjust", in: namespace)                    }
                    Button {                        withAnimation(.bouncy) { isExpanded.toggle() }                    } label: {                        Image(systemName: isExpanded ? "xmark" : "plus")                            .frame(width: 56, height: 56)                    }                    .glassEffect(.regular.tint(.accentColor).interactive())                    .glassEffectID("toggle", in: namespace)
                    if isExpanded {                        ActionButton(icon: "crop")                            .glassEffectID("crop", in: namespace)                    }                }
                if isExpanded {                    ActionButton(icon: "wand.and.stars")                        .glassEffectID("enhance", in: namespace)                }            }        }    }}

Navigation Patterns

Tab Bar (Floating)

swift
TabView {    Tab("Home", systemImage: "house") {        HomeView()    }
    Tab("Search", systemImage: "magnifyingglass") {        SearchView()    }
    Tab("Profile", systemImage: "person") {        ProfileView()    }}// Tab bar now floats, reacts to background, collapses on scroll

Toolbar with Grouping

swift
.toolbar {    ToolbarItemGroup(placement: .topBarTrailing) {        Button("Edit", systemImage: "pencil") { }        Button("Share", systemImage: "square.and.arrow.up") { }    }
    ToolbarSpacer(.flexible, placement: .topBarTrailing)
    ToolbarItem(placement: .topBarTrailing) {        Button("Done", systemImage: "checkmark") { }            .tint(.accentColor)    }}

Sheets with Morphing

swift
struct ContentView: View {    @State private var showSettings = false    @Namespace private var namespace
    var body: some View {        NavigationStack {            ContentView()                .toolbar {                    ToolbarItem(placement: .topBarTrailing) {                        Button("Settings", systemImage: "gear") {                            showSettings = true                        }                        .matchedTransitionSource(id: "settings", in: namespace)                    }                }                .sheet(isPresented: $showSettings) {                    SettingsView()                        .navigationTransition(.zoom(sourceID: "settings", in: namespace))                        .presentationDetents([.medium, .large])                }        }    }}

SF Symbols Effects

swift
Image(systemName: "checkmark.circle")    .symbolEffect(.drawOn, value: isComplete)
Image(systemName: "heart.fill")    .symbolEffect(.bounce, value: isFavorite)

Haptics API

swift
import UIKit
// Impact feedbacklet generator = UIImpactFeedbackGenerator(style: .medium)generator.impactOccurred()
// Selection feedbacklet selection = UISelectionFeedbackGenerator()selection.selectionChanged()
// Success/errorlet notification = UINotificationFeedbackGenerator()notification.notificationOccurred(.success)

Accessibility Behaviors

Automatic Glass Adaptations

Glass automatically adapts to:

  • Reduce Transparency: More frosting
  • Increase Contrast: Stark borders
  • Reduce Motion: Tones down animation

Manual Checks

swift
@Environment(\.accessibilityReduceTransparency) var reduceTransparency@Environment(\.accessibilityReduceMotion) var reduceMotion
var animation: Animation? {    reduceMotion ? nil : .bouncy}

System expectations: minimum 44x44pt touch targets, accessibility labels, Dynamic Type support.

Reference

For official Apple documentation links, WWDC session IDs, and API quick reference tables, see reference.md [blocked].

Source and attribution

Source:Prisma-Labs-Dev/apple-skillsinskills/ios-liquid-glassat commit4986260

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from Prisma-Labs-Dev/apple-skills

Eventkit

Prisma-Labs-Dev

Reference documentation for Apple's EventKit calendar and reminder APIs, covering EKEventStore, EKEvent and EKReminder.

Software DevelopmentOct 9, 2026

Swiftui

Prisma-Labs-Dev

Local SwiftUI API reference for looking up views, layouts, navigation, state wrappers and modifiers.

Software DevelopmentOct 9, 2026

Xcuitest

Prisma-Labs-Dev

Reference guide for writing reliable XCUITest UI tests in Swift 6, covering queries, waits, assertions and screenshots.

Software DevelopmentOct 9, 2026

Swiftdata

Prisma-Labs-Dev

Reference documentation for SwiftData APIs covering @Model, ModelContext, @Query and schema migrations.

Software DevelopmentOct 9, 2026

Widgetkit

Prisma-Labs-Dev

Answers WidgetKit API questions by searching bundled reference docs on widgets, timeline entries and providers.

Software DevelopmentOct 9, 2026

Hig

Prisma-Labs-Dev

Local greppable Apple Human Interface Guidelines reference for factual lookups on components, accessibility minimums and conventions.

Research & AnalysisOct 9, 2026

More in Software Development

Playground

anthropics

Featured

Builds self-contained interactive HTML playgrounds with controls, live preview, and copyable prompt output.

Software Development37Kupdated today

M5 Onboard

anthropics

Featured

Provisions M5Stack ESP32 boards by detecting them on USB, flashing UIFlow 2.0 firmware, and installing a MicroPython app bundle.

Software Development37Kupdated today

Cardputer Buddy

anthropics

Featured

Guides iterating on a Cardputer-Adv MicroPython app bundle: adding apps, pushing files over USB-serial, tailing logs, and running REPL commands.

Software Development37Kupdated today

Web Design Guidelines

vercel-labs

Featured

Reviews UI code against Web Interface Guidelines fetched from a remote source and reports findings as file:line entries.

Software Development32Kupdated 5 weeks ago

Vercel React Native Skills

vercel-labs

Featured

React Native and Expo best-practice rules covering list performance, animation, navigation, UI patterns, state, and monorepo setup.

Software Development32Kupdated 5 weeks ago

Vercel React Best Practices

vercel-labs

Featured

Vercel's React and Next.js performance guidelines, organized as 70 rules for writing, reviewing, and refactoring code.

Software Development32Kupdated 5 weeks ago