---
name: swiftui-liquid-glass-design
description: "Adopt iOS 26 Liquid Glass in SwiftUI — glassEffect, GlassEffectContainer, tinting, and fixing broken custom UIs. Production Liquid Glass adoption for iOS 26: applying .glassEffect with Glass.regular/.clear and tint/interactive variants, grouping shapes in GlassEffectContainer with glassEffectID for morph transitions, the .buttonStyle(.glass) and toolbar/tabbar auto-adoption, scroll edge effects, and backgroundExtensionEffect. Covers fixing custom components that break under the new material, opting out with the UIDesignRequiresCompatibility flag during migration, and rebuilding bespoke blur/material UIs to read correctly against Liquid Glass."
license: MIT
---

# SwiftUI Liquid Glass

Adopt iOS 26's Liquid Glass material in SwiftUI the right way — applying `.glassEffect`, grouping shapes in a `GlassEffectContainer` for morph transitions, tinting and interactivity, and repairing custom UIs that broke when the system controls re-rendered under the new design language. Built for iOS developers shipping apps on the iOS 26 / Xcode 26 SDK who want their hand-built surfaces to feel native rather than fighting the new toolbar and navigation chrome.

## When to use it

- You bumped your deployment target to iOS 26 and your custom bottom bar, floating buttons, or HUD now look mismatched against the new glass toolbars.
- You want a custom panel, badge, or control cluster to read as Liquid Glass instead of an opaque `.regularMaterial` card.
- Several glass elements sit near each other and you want them to blend, separate, and morph as they move or appear.
- Buttons, search fields, or tab bars lost their expected look after recompiling on the new SDK.

## What it does

The skill applies the real iOS 26 APIs in the right combinations:

- `.glassEffect(_:in:)` with `Glass.regular` and `Glass.clear`, plus `.tint(_:)` and `.interactive()` modifiers on the `Glass` value for colored, touch-reactive surfaces.
- `GlassEffectContainer { … }` to batch nearby glass shapes so they sample one another and render efficiently, with `.glassEffectID(_:in:)` and a `@Namespace` to drive morph transitions between states.
- `.glassEffectUnion(id:namespace:)` to fuse multiple shapes into a single contiguous glass blob.
- Control-level adoption: `.buttonStyle(.glass)` and `.glassProminent`, plus guidance on letting `toolbar`, `TabView`, and navigation bars adopt glass automatically rather than overriding them.
- Edge treatment with the scroll edge effect and `.backgroundExtensionEffect()` so content flows correctly under the new chrome.

## Usage

```swift
@Namespace private var glassNS

GlassEffectContainer(spacing: 16) {
    HStack(spacing: 16) {
        Image(systemName: "wand.and.stars")
            .frame(width: 56, height: 56)
            .glassEffect(.regular.tint(.purple).interactive(),
                         in: .circle)
            .glassEffectID("wand", in: glassNS)

        Image(systemName: "slider.horizontal.3")
            .frame(width: 56, height: 56)
            .glassEffect(.regular, in: .circle)
            .glassEffectID("tune", in: glassNS)
    }
}
```

## Tips & gotchas

- Always wrap multiple glass shapes in a `GlassEffectContainer`. Standalone `.glassEffect` calls won't sample neighbors, so they can't blend or morph and cost more to render.
- `Glass.clear` is for use over rich, high-contrast imagery; on plain backgrounds it reads as nearly invisible — reach for `.regular` by default.
- Use tint sparingly. Liquid Glass derives most of its color from what's behind it; heavy tints flatten the effect.
- Don't reimplement toolbars or tab bars to "match" — remove your custom chrome and let the system adopt glass, then style only what remains.

## FAQ

**Does this work below iOS 26?** No. `glassEffect` and `GlassEffectContainer` are iOS 26 APIs. Gate adoption with `if #available(iOS 26, *)` and keep a material-based fallback for older OS versions.

**Why did my buttons change after rebuilding?** Recompiling against the iOS 26 SDK opts standard controls into Liquid Glass automatically. The skill helps you decide where to accept that and where to pin an explicit style.

**Can I morph between two layouts?** Yes — give matched shapes the same `glassEffectID` in a shared namespace and animate the state change; the container interpolates the glass between them.