How to add visual effect blurs

Paul Hudson    @twostraws    March 14th 2023

Updated for Xcode 14.2

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 project

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)
}

Download this as an Xcode project

Sponsor Hacking with Swift and reach the world's largest Swift community!

Similar solutions…

• How to provide visual structure using foreground styles
• How to create a marching ants border effect
• How to add a TextField to an alert
• How to add bar items to a navigation view
• How to add custom swipe action buttons to a List row