TechnologiesSwiftUIOrnaments and Glass Effects

GlassBackgroundEffectConfiguration struct

iOSmacOStvOSwatchOSvisionOS✓ renders

A configuration used to build a custom effect.

How it works

GlassBackgroundEffectConfiguration carries the properties SwiftUI uses to render a glass background effect — the translucent, light-bending material that lets a view float convincingly above the scene behind it. You don't construct it yourself; the framework hands you a configured value so the system can choose a consistent material, shape, and display characteristics that match the current platform and environment. Reach for it when you apply glassBackgroundEffect() to a view and want that surface to read as a distinct, layered panel rather than flat content drawn directly onto the background.

  1. Apply the effect with glassBackgroundEffect()

    The modifier is the entry point: it wraps a view in the glass material whose properties this configuration describes. Here glassBackgroundEffect() is attached to the padded VStack, turning the icon-and-text group into a single floating glass panel.

  2. Give the configuration content to shape

    The configuration applies to the view it modifies, so the material conforms to whatever you place inside. The VStack(spacing: 8) holding the Image(systemName: "sparkles") and the two Text labels is the content that the glass surface forms behind, picking up its bounds and corner treatment.

  3. Inset content before the surface forms

    Padding applied before the modifier defines how much breathing room sits between the content and the edge of the glass. The inner .padding(24) sets the panel's interior margin, so the configuration's material extends out to surround the labels with space rather than hugging them.

  4. Let the material separate the panel from its surroundings

    Modifiers added after glassBackgroundEffect() act on the finished glass surface as a whole. The trailing .padding() pushes the completed panel away from neighboring content, letting the configured glass read as a layer that floats above the scene instead of butting against it.

Try it — Wrap the VStack in a ScrollView and place colored content behind it so you can scroll material under the panel — the glass described by GlassBackgroundEffectConfiguration will visibly refract and tint whatever passes beneath it.

Example & preview

Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.

GlassBackgroundEffectConfiguration.swift
struct GlassBackgroundEffectConfigurationDemo: View {
    var body: some View {
        VStack(spacing: 8) {
            Image(systemName: "sparkles")
                .font(.largeTitle)
            Text("Glass Panel")
                .font(.headline)
            Text("Floating over the scene")
                .font(.caption)
                .foregroundStyle(.secondary)
        }
        .padding(24)
        .glassBackgroundEffect()
        .padding()
    }
}
Live preview
Glass Panel Floating over the scene
Glass Panel Floating over the scene
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →