How to to add Blur overlay on top of all views using .Blur as ViewModifier in SwiftUI

Question

I have created a viewModifier which blurs a view when added.

Problem is when I add it on parent view of all the contents, all views are blurred differently.

I assume it's because it goes to all the contents and blur each of them individually instead of adding an overlay blur to the parent view.

I used Swift UI's native blur because UIBlurEffect has very limited configuration i.e. I can't adjust the blur intensity to a specific value.

Here it is when the modifier is added in the parent ZStack:

Here when I add it on background image only:

Adding it to background image looks good but I need it to be on top of all views. Here is my code:

Main View

import SwiftUI

struct BlurViewDemo: View {
    @State private var isPressed = true
    @State private var blurColor: BlurColor = .none
    var body: some View {
        ZStack {
            GeometryReader { proxy in
                let frame = proxy.frame(in: .global)
                Image("blur-view-demo-image")
                    .resizable()
                    .frame(width: frame.size.width, height: frame.size.height)
                    // When added here only the background image is blurred.
                    .modifier(
                        BlurModifier(
                            showBlur: $isPressed, blurColor: $blurColor
                        )
                    )
                
            }
            
            VStack(spacing: 30) {
                // TITLE STYLE
                Text(getSelectedBlurTitle())
                    .font(.system(size: 60))
                    .offset(y: -40)
                    .foregroundColor(
                        blurColor == .dark  && isPressed ? .white : .black
                    )
                
                // TOGGLE BLUR BUTTON
                Button(action: {
                    isPressed.toggle()
                }, label: {
                    Text(isPressed ? "Blur: On" : "Blur: Off")
                        .foregroundColor(.white)
                })
                .frame(width: 80, height: 40)
                .background(Color(#colorLiteral(red: 0.2, green: 0.4, blue: 0.4, alpha: 1)))
                
                // DEFAULT BUTTON
                Button(action: {
                    isPressed = true
                    blurColor = .none
                }, label: {
                    Text("Default")
                        .foregroundColor(.white)
                })
                .frame(width: 80, height: 40)
                .background(Color.gray)
                
                // LIGHT BUTTON
                Button(action: {
                    isPressed = true
                    blurColor = .light
                }, label: {
                    Text("Light")
                        .foregroundColor(.black)
                })
                .frame(width: 80, height: 40)
                .background(Color.white)
                
                // DARK BUTTON
                Button(action: {
                    isPressed = true
                    blurColor = .dark
                }, label: {
                    Text("Dark")
                        .foregroundColor(.white)
                })
                .frame(width: 80, height: 40)
                .background(Color.black)
            } //: VSTACK
        } //: ZSTACK
        .edgesIgnoringSafeArea(.all)
        // When added here, the buttons are not blurred properly.
        .modifier(
             BlurModifier(
                 showBlur: $isPressed, blurColor: $blurColor
             )
        )
    }
    
    private func getSelectedBlurTitle() -> String {
        guard isPressed else { return "Clear"}
        switch blurColor {
        case .none:
            return "Default"
        case .light:
            return "Light"
        case .dark:
            return "Dark"
        }
    }
}

struct BlurViewDemo_Previews: PreviewProvider {
    static var previews: some View {
        BlurViewDemo()
    }
}

View Modifier

public enum BlurColor {
    case none
    case light
    case dark
}

import SwiftUI

struct BlurModifier: ViewModifier {
    @Binding private var showBlur: Bool
    @Binding private var blurColor: BlurColor
    @State private var blurRadius: CGFloat = 14
    
    public init(showBlur: Binding<Bool>, blurColor: Binding<BlurColor>) {
        self._showBlur = showBlur
        self._blurColor = blurColor
    }
    
    func body(content: Content) -> some View {
        ZStack {
            content
                .blur(radius: showBlur ? blurRadius : 0, opaque: true)
                .animation(Animation.easeInOut(duration: 0.3))
            
            .edgesIgnoringSafeArea(.all)
            .navigationBarHidden(showBlur ? true : false)
            Rectangle()
                .fill(showBlur ? getBlurColor() : Color.white.opacity(0.0001))
                .edgesIgnoringSafeArea(.all)
        }
    }
    
    private func getBlurColor() -> Color {
        switch blurColor {
        case .none:
            return Color.white.opacity(0.5)
        case .light:
            return Color.white.opacity(0.6)
        case .dark:
            return Color.black.opacity(0.5)
        }
    }
}

Answer 1

You should disable the opaque parameter in your View Modifier by setting it to false like this:

.blur(radius: showBlur ? blurRadius : 0, opaque: false)