How it works
PlateGlassBackgroundEffect is a glass material that gives a view a flat, plate-like surface — a thin, even pane that sits behind your content and lets the scene show through with a subtle frosted blur. Reach for it through the .plate value when you want a clean backing panel for a card, label, or control without the rounded, raised look of the system's deeper glass styles. It is one of the styles offered by the glassBackgroundEffect(_:) modifier, so you select the appearance by name and let SwiftUI render and update the material for you. Use it when the design calls for a calm, document-like surface that reads as glass but stays visually flat against the layout.
Apply the effect with glassBackgroundEffect(_:)
The plate material is installed by attaching
glassBackgroundEffect(.plate)to the view you want to back. The modifier draws the glass behind the view's content and clips it to the view's shape, so whatever you stack above it floats on the pane. Here it is applied to theVStackthat holds the icon and twoTextlabels.Select the style with .plate
The
.plateargument is the entry point toPlateGlassBackgroundEffect: it tellsglassBackgroundEffect(_:)to use the flat, plate-like variant rather than another glass style. Swapping the argument changes only the material's appearance, not the layout, which keeps the call site to a single token —.plate.Size the pane by padding the content first
The glass fills the bounds of the view it modifies, so the panel's footprint is set by the content and any insets that come before the effect. The
.padding(40)placed ahead of.glassBackgroundEffect(.plate)grows the inner area, giving the plate a generous margin around the icon and text instead of hugging them tightly.Compose the surrounding inset
Modifier order matters: only what precedes
glassBackgroundEffect(.plate)is covered by the glass, while modifiers after it act on the now-glassed view. The trailing.padding()adds breathing room outside the plate, separating the finished panel from its neighbors without affecting the material itself.
.glassBackgroundEffect(.plate) to .glassBackgroundEffect(.regular) to see the flat plate give way to a rounder, more raised glass surface.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 PlateGlassBackgroundEffectDemo: View {
var body: some View {
VStack(spacing: 12) {
Image(systemName: "square.stack.3d.up.fill")
.font(.system(size: 44))
Text("Plate Glass")
.font(.title2.bold())
Text("A flat, plate-like glass background.")
.font(.callout)
.foregroundStyle(.secondary)
}
.padding(40)
.glassBackgroundEffect(.plate)
.padding()
}
}