How it works
FeatheredGlassBackgroundEffect is a glass background style whose edges fade gradually into the surrounding content instead of ending at a hard, defined boundary. Where the default glass effect reads as a distinct floating panel, the feathered variant softens its perimeter so the material dissolves into whatever sits behind it. Reach for it when you want the depth and translucency of glass but a gentler, less framed presence — for ornaments, overlays, or labels that should feel integrated rather than cut out.
Apply the effect with glassBackgroundEffect(_:)
The feathered style is applied through the
glassBackgroundEffect(_:)view modifier, which installs a glass material behind the view's content. Attaching it to a view — here theVStackof anImageand twoTextlabels — turns that view's region into a glass surface that picks up and blurs whatever lies underneath.Select the feathered variant
Passing
.featheredchoosesFeatheredGlassBackgroundEffectas the style argument rather than the standard glass. This is what swaps the crisp panel edge for a soft, faded falloff; the effect's identity lives entirely in this style value, so.glassBackgroundEffect(.feathered)is the single line that defines the look.Reserve the area the glass fills with padding
The glass background covers the bounds of the view it modifies, so the inset around the content determines how much surface there is to feather. The inner
.padding(40)before.glassBackgroundEffect(.feathered)gives the labels room and grows the glass region, while the trailing.padding()separates the finished glass shape from its container.Layer content on top of the material
Anything placed inside the modified view renders over the feathered glass, with the softened edges blending only the background. The
sparklesImageand the headline and subheadlineTextstay fully opaque and legible while the material behind them fades outward, which is the typical pattern for ornaments where the foreground must read clearly.
.feathered for .regular in .glassBackgroundEffect(.feathered) to compare the soft, faded perimeter against the standard glass effect's hard edge.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 FeatheredGlassBackgroundEffectDemo: View {
var body: some View {
VStack(spacing: 12) {
Image(systemName: "sparkles")
.font(.largeTitle)
Text("Feathered Glass")
.font(.headline)
Text("Softened, faded edges")
.font(.subheadline)
.foregroundStyle(.secondary)
}
.padding(40)
.glassBackgroundEffect(.feathered)
.padding()
}
}