SwiftUI Glass Effect

by Annett Schwarze | 2026-01-23

iOS 26 arrived with a new glassy look and SwiftUI provides convenient ways to use glass effects in a view. To use a glassy look, the view modifier `.glassEffect()` is applied. It will put a capsule shaped glassy background behind a view.

For custom background shapes use `.glassEffect(,in:)`. In the example below a rounded rectangle is used a glass background shape for a list of items.

        
import SwiftUI

struct SampleGlassEffectView: View {
    @State private var isExpanded: Bool = false

    @State private var times: [String] = ["sun.max", "moon"]
    @State private var clouds: [String] = ["cloud", "cloud.rain", "cloud.bolt"]
    @State private var selectedTime: String = ""

    @State private var records: [String] = []

    @Namespace private var namespace

    struct Img: View {
        let systemName: String
        var body: some View {
            ImgSml(systemName: systemName)
                .padding()
        }
    }

    struct ImgSml: View {
        let systemName: String
        var body: some View {
            Image(systemName: systemName)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 32, height: 32)
        }
    }

    var body: some View {
        ZStack {
            Image("mtfuji")
                .resizable()
                .scaledToFill()
                .ignoresSafeArea()
            if #available(iOS 26.0, *) {
                VStack(spacing: 24) {
                    VStack(spacing: 8) {
                        Text("Glass Effect")
                            .font(.largeTitle)
                            .padding()
                    }
                    .frame(maxWidth: .infinity)
                    .background {
                        Color.white.opacity(0.5)
                            .ignoresSafeArea()
                    }

                    HStack {
                        GlassEffectContainer(spacing: 48) {
                            HStack {
                                ForEach(times, id: \.self) { time in
                                    Img(systemName: time)
                                        .bold(selectedTime == time)
                                        .glassEffect(.regular.interactive())
                                        .onTapGesture {
                                            withAnimation {
                                                selectedTime = time
                                                isExpanded = true
                                            }
                                        }
                                }
                            }
                        }
                    }

                    HStack {
                        GlassEffectContainer(spacing: 40.0) {
                            HStack(spacing: 16.0) {
                                if isExpanded {
                                    ForEach(clouds, id: \.self) { cloud in
                                        Img(systemName: cloud)
                                            .onTapGesture {
                                                withAnimation {
                                                    let t = selectedTime == "sun.max" ? "sun" : "moon"
                                                    let r = cloud.replacingOccurrences(of: "cloud", with: "cloud.\(t)")
                                                    records.append(r)
                                                    selectedTime = ""
                                                    isExpanded = false
                                                }
                                            }
                                            .glassEffect()
                                            .glassEffectID(cloud, in: namespace)
                                    }
                                } else {
                                    Img(systemName: "cloud.circle")
                                        .glassEffect()
                                        .glassEffectID("cloud.circle", in: namespace)

                                }
                            }
                        }
                    }

                    if records.isEmpty == false {
                        VStack(spacing: 8) {
                            ForEach(records, id: \.self) { rec in
                                ImgSml(systemName: rec)
                            }
                        }
                        .padding()
                        .frame(width: 300)
                        .glassEffect(.regular.interactive(), in: RoundedRectangle(cornerRadius: 32))

                        .padding(.horizontal, 24)

                        VStack(spacing: 8) {
                            Image(systemName: "trash")
                                .font(.title2)
                                .foregroundStyle(.red)
                                .frame(maxWidth: 300)
                                .padding(.horizontal)
                        }
                        .onTapGesture {
                            withAnimation {
                                records.removeAll()
                            }
                        }
                        .padding()
                        .frame(width: 300)
                        .glassEffect(.regular.interactive(), in: RoundedRectangle(cornerRadius: 32))
                    }
                    Spacer()
                }
            } else {
                VStack {
                    Text("Requires iOS 26")
                        .font(.headline)
                        .foregroundStyle(.secondary)
                }
                .padding()
            }
        }
    }
}

#Preview {
    SampleGlassEffectView()
}