How to add visual effect blurs

About 2 min

How to add visual effect blurs 관련

SwiftUI by Example

Back to Home

How to add visual effect blurs | SwiftUI by Example

How to add visual effect blurs

Updated for Xcode 15

New in iOS 15

SwiftUI has a brilliantly simple equivalent to UIVisualEffectView, that combines ZStack, the background() modifier, and a range of built-in materials.

For example, this places some text over an image, applying a standard blur effect to the text:

ZStack {
    Image("singapore")

    Text("Visit Singapore")
        .padding()
        .background(.thinMaterial)
}

Download this as an Xcode projectopen in new window

The words “Visit Singapore” on a grey rectangle over an image of Singapore's Jewel indoor waterfall. The rectangle has a slightly translucent frosted glass effect.

You can adjust the “thickness” of your material – how much of the background content shines through – by using one of several material types. From thinnest to thickest, they are:

.ultraThinMaterial
.thinMaterial
.regularMaterial
.thickMaterial
.ultraThickMaterial

If you’re using the secondary foreground style, SwiftUI automatically adjusts the text color so that it has a vibrant effect and can stand out from the background:

ZStack {
    Image("singapore")

    Text("Visit Singapore")
        .foregroundStyle(.secondary)
        .padding()
        .background(.ultraThinMaterial)
}