UI New in iOS 27iOS 27+ Demo

Liquid Glass Visual Design

Liquid Glass is Apple's new cross-platform visual design language introduced in iOS 27, replacing the frosted glass aesthetic with a dynamic, refraction-based material that responds to content and light beneath it. It ships as updated system components and new SwiftUI modifiers that let apps adopt the look automatically or explicitly.

SwiftUIUIKit

Impact

4/5

Why you should care

• System controls (Tab Bar, Navigation Bar, Sheets, Alerts) automatically render in Liquid Glass — apps built with standard UIKit and SwiftUI components get the effect for free on iOS 27.

• New `.glassEffect()` SwiftUI modifier lets custom views participate in the Liquid Glass system, enabling bespoke UI elements that match the platform aesthetic.

• The material is adaptive: it reads underlying content color and luminance at render time, so no manual dark/light mode handling is needed for the glass layer itself.

Tiny Demo

Simple

A floating card built entirely with SwiftUI that uses the new `.glassEffect()` modifier to render a Liquid Glass surface over a colorful background image, demonstrating the core adoption pattern.

import SwiftUI

struct LiquidGlassCardDemo: View {
    var body: some View {
        ZStack {
            // Colorful background to show refraction
            LinearGradient(
                colors: [.purple, .blue, .teal, .green],
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
            .ignoresSafeArea()

            // Decorative blobs behind the card
            Circle()
                .fill(.pink.opacity(0.7))
                .frame(width: 200, height: 200)
                .offset(x: -60, y: -80)

            Circle()
                .fill(.yellow.opacity(0.6))
                .frame(width: 160, height: 160)
                .offset(x: 80, y: 60)

            // Liquid Glass card
            VStack(alignment: .leading, spacing: 12) {
                Label("Now Playing", systemImage: "music.note")
                    .font(.caption)
                    .foregroundStyle(.secondary)

                Text("Midnight Refraction")
                    .font(.title2.bold())

                Text("Glass Animals")
                    .font(.subheadline)
                    .foregroundStyle(.secondary)

                Divider()

                HStack {
                    Button { } label: {
                        Image(systemName: "backward.fill")
                    }
                    Spacer()
                    Button { } label: {
                        Image(systemName: "pause.fill")
                            .font(.title)
                    }
                    Spacer()
                    Button { } label: {
                        Image(systemName: "forward.fill")
                    }
                }
                .buttonStyle(.plain)
                .foregroundStyle(.primary)
            }
            .padding(24)
            .frame(width: 300)
            // ✨ Core iOS 27 API: apply Liquid Glass material
            .glassEffect()
            .clipShape(RoundedRectangle(cornerRadius: 28, style: .continuous))
        }
    }
}

#Preview {
    LiquidGlassCardDemo()
}

Gotchas

Stacking multiple overlapping `.glassEffect()` views can degrade performance — profile with Metal System Trace. The effect is rendered by the compositor, so screenshots and `UIGraphicsImageRenderer` captures may not reflect the live appearance. Avoid applying `.glassEffect()` inside `List` rows; use it on overlay or floating containers only.

Requirements

Full real-time refraction rendering requires Apple Silicon or A17 Pro and later; older devices receive a simplified fallback material.

More iOS 27 APIs land every week.

Get notified when new capabilities are published — no noise, just signal.

All capabilities