How it works
GlassBackgroundEffect is the protocol that backs SwiftUI's glass-material background, a translucent layer that refracts and blurs the content behind a view so it reads as a pane of physical glass floating in space. You don't conform to it or instantiate it directly; instead you apply it through the glassBackgroundEffect(in:) modifier, which clips the effect to a shape you supply. Reach for it when a piece of content — a panel, label, or ornament — needs to sit legibly on top of varied, unpredictable backdrops while still letting that backdrop show through. It is the system-standard way to give floating UI the depth and material quality that solid fills and opaque colors cannot provide.
Apply the material with glassBackgroundEffect(in:)
The modifier installs a glass material behind the modified view and is the entry point to the whole API; the value it produces conforms to GlassBackgroundEffect. Place it after the content and its layout so the glass sits behind everything: in the example
.glassBackgroundEffect(in: .rect(cornerRadius: 24))is attached to the paddedVStack, putting the material behind theImageand the twoTextlabels.Define the glass region with the in: shape parameter
The in: parameter takes a shape that both clips the material and rounds its edges, so the glass only appears where you want it and follows your card's silhouette. Passing
.rect(cornerRadius: 24)gives the pane gently rounded corners; swapping in.capsuleor.circlereshapes the same glass for a pill or badge without touching the content.Order the material relative to padding
Because the modifier applies to whatever view it's chained onto, the surrounding
.padding(40)matters: padding first grows the view's bounds, then glassBackgroundEffect fills that enlarged area, leaving an even margin of glass around theVStack. Reverse the order and the material would hug the text tightly instead of forming a comfortable card.Let content layer on top for legibility
GlassBackgroundEffect only paints the backing layer — your foreground views render unchanged above it, which is why glass works best with content that supplies its own contrast. Here the
.font(.headline)title and the.foregroundStyle(.secondary)caption stay crisp against the blurred backdrop the material captures.
in: .rect(cornerRadius: 24) to in: .capsule to watch the same glass material reshape itself into a rounded pill around the content.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.
struct GlassBackgroundEffectDemo: View {
var body: some View {
VStack(spacing: 12) {
Image(systemName: "sparkles")
.font(.largeTitle)
Text("Glass Background")
.font(.headline)
Text("A glass material behind this content.")
.font(.caption)
.foregroundStyle(.secondary)
}
.padding(40)
.glassBackgroundEffect(in: .rect(cornerRadius: 24))
}
}