Swiftui - How to Blur the Default Background Color of a View

SwiftUI - How can I blur the default background color of a view?

It is possible to apply blur directly to background only, like in the example below

Button("Test") {}
        .background(Color.red.blur(radius: 20))

How can I have a Blur effect as a Background in SwiftUI?

In iOS 15 you can use Materials, like .ultraThinMaterial

.background(.ultraThinMaterial)

But from iOS 14 down, there is no SwiftUI way to achieve this, though it is possible to create an UIViewRepresentable and place it as a background.

Following code will create a UIViewRepresentable that you are able to use as a background: .systemUltraThinMaterial can be changed to any material

import SwiftUI
struct BlurView: UIViewRepresentable {
    var style: UIBlurEffect.Style = .systemUltraThinMaterial
    func makeUIView(context: Context) -> UIVisualEffectView {
        return UIVisualEffectView(effect: UIBlurEffect(style: style))
    }
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        uiView.effect = UIBlurEffect(style: style)
    }
}

View extension (optional):

extension View {
    func backgroundBlurEffect() -> some View {
        self.background(BlurView())
    }
}

Then use on a view like a pop up.

.background(BlurView()) 

or if used like extension

.backgroundBlurEffect()

See image

Is there a method to blur a background in SwiftUI?

1. The Native SwiftUI way:

Just add .blur() modifier on anything you need to be blurry like:

Image("BG")
   .blur(radius: 20)

_{Note the top and bottom of the view}

Note that you can Group multiple views and blur them together.

---

2. The Visual Effect View:

You can bring the prefect UIVisualEffectView from the UIKit:

VisualEffectView(effect: UIBlurEffect(style: .dark))

With this tiny struct:

struct VisualEffectView: UIViewRepresentable {
    var effect: UIVisualEffect?
    func makeUIView(context: UIViewRepresentableContext<Self>) -> UIVisualEffectView { UIVisualEffectView() }
    func updateUIView(_ uiView: UIVisualEffectView, context: UIViewRepresentableContext<Self>) { uiView.effect = effect }
}

---

3. iOS 15: Materials

You can use iOS predefined materials with one line code:

.background(.ultraThinMaterial)

Returning a view when blurred background in Swiftui

You can use this approach to achieve what you're looking for

import SwiftUI

struct BlurBackground: View {
    // MARK: - PROPERTIES
    
    @State private var showNextView: Bool = false
    
    // MARK: - BODY
    
    var body: some View {
        ZStack{
            Color.orange
                .edgesIgnoringSafeArea(.all)
                .blur(radius: showNextView ? 8.0 : 0.0) //Blur
            
            VStack(spacing: 40){
                Text("First View")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .foregroundColor(.white)
                
                Image(systemName: "apps.iphone")
                    .resizable()
                    .scaledToFit()
                    .frame(height: 200)
                    .foregroundColor(.white)
                
                Button("Show Next View") {
                    showNextView = true
                }
                .padding(.horizontal, 30)
                .padding(.vertical, 15)
                .background(.white)
            }//: VSTACK
            .blur(radius: showNextView ? 8.0 : 0.0) //Blur
            
            if showNextView{
                VStack {
                    Text("Second View")
                        .font(.largeTitle)
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                    
                    Image(systemName: "laptopcomputer")
                        .resizable()
                        .scaledToFit()
                        .frame(height: 200)
                        .foregroundColor(.white)
                }//: VSTACK
            }
        }//: ZSTACK
    }
}

// MARK: - PREVIEW

struct BlurBackground_Previews: PreviewProvider {
    static var previews: some View {
        BlurBackground()
    }
}

How to blur background when another view is active?

The blur effect accumulates because VStack content is not determined as changed by SwiftUI rendering engine, so its cached rendered variant is used to next redraw.. and so on.

To fix this we need to mark VStack to refresh. Here is possible solution. Tested with Xcode 11.4 / iOS 13.4

VStack{
    Button(action: {self.showWindow.toggle()}){
        Text("Enable Blur")
            .foregroundColor(.white)
            .padding()
            .background(Color.black)
            .cornerRadius(5)
    }
}.id(showWindow)                  // << here !!
.blur(radius: showWindow ? 5 : 0)

How do I set a view's background to the gray'ish one in SwiftUI?

That is the default group table view background color (systemGroupedBackground) with the color code #F2F2F7. You can use it as a background color like this:

.background(Color(red: 0.949, green: 0.949, blue: 0.97, opacity: 1.0))

...or simply:

.background(Color(.systemGroupedBackground))

Keep in mind that with the latter solution, the color might change in later iOS versions if Apple decides to change the value of the constant.

SwiftUI: How to add Blur view with app logo when app in background?

You could use a ZStack and place your logo image on top whenever there's a blur in place:

struct ContentView: View {
    
    @Environment(\.scenePhase) var scenePhase
    @State var blurRadius : CGFloat = 0
    
    var body: some View {
        ZStack {
            VStack{
                MainView()
            }
            .blur(radius: blurRadius)
            .onChange(of: scenePhase, perform: { value in
                switch value {
                case .active : withAnimation { blurRadius = 0 }
                case .inactive: withAnimation { blurRadius = 15 }
                case .background:
                    blurRadius = 20
                @unknown default: print("Unknown")
                }
            })
            if blurRadius != 0 {
                Image("logo")
            }
        }
    }
}

This is assuming your app logo is added to the project's assets as "logo". Obviously, you may want to do some modifications like .resizable or .frame on the Image

---

Related Topics