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

Question

I want to have blur effect as background for my View, as we know, we can blur the view and what is inside, but I do't want blur content of view but I want blur background view to give a glassy blured through effect as we know. How i can do this in SwiftUi?

In other words, the under layer of view would be blured in frame on current view which sets as background for current view.

Goal: I like to see Hello world from background blured out.

import SwiftUI
    
struct ContentView: View {

    @State var showCustomAlertView: Bool = Bool()
    @State var stringOfText: String = "Hello, world!"
    
    var body: some View {
         ZStack {
              VStack {
                  HStack {
                      Button(action: {
                          withAnimation(.easeInOut(duration: 0.35)) { showCustomAlertView.toggle() }
                          print("trash info")
                      }) { Image(systemName: "trash") }
                      Spacer()
                    }
                    .padding()
                    
                    Spacer()
                    
                    if showCustomAlertView {
                        CustomAlertView(showCustomAlertView: $showCustomAlertView)
                        Spacer()
                    }
                }
                .zIndex(1)
                
                VStack {
                    ForEach (0..<16) { index in
                        Text(stringOfText + String(index))
                            .bold()
                            .padding(5)
                    }
                    
                    Button("update Text") {
                        stringOfText = "Omid"
                    }
                    .padding()
                    
                    Spacer()
                }
                .padding()
                .disabled(showCustomAlertView)
            }
        }
    }
}
    
struct CustomAlertView: View {

    @Binding var showCustomAlertView: Bool

    var body: some View {
        let minValueOfScreen = 375-20
        ZStack {
            Color.white.opacity(1.0)
                .cornerRadius(15)
                .shadow(color: Color.black.opacity(0.5), radius: 50, x: 0, y: 0) // : Here I like to have Blured Background

            VStack {
                Spacer()
                Image(systemName: "trash").font(Font.system(size: 50))
                Spacer()
                Text("Are you Sure for deleting this File?")
                    .font(Font.title3.bold())

                Spacer()

                Text("You can't undo this action.")

                HStack {
                    Button("dismiss") {
                        print("dismiss")
                        showCustomAlertView.toggle()
                }
                .foregroundColor(Color.black)
                .padding(.vertical, 10)
                .padding(.horizontal, 40)
                .background(Color(UIColor.systemGray4))
                .cornerRadius(10)

                Spacer()

                Button("Delete") {
                    print("Delete")
                    showCustomAlertView.toggle()
                }
                .foregroundColor(Color.white)
                .font(Font.body.bold())
                .padding(.vertical, 10)
                .padding(.horizontal, 40)
                .background(Color.blue)
                .cornerRadius(10)
            }
            .padding(30)
        }
    }
    .frame(width: minValueOfScreen, height: minValueOfScreen, alignment: .center)
}

my Goal Image:

Does this answer your question https://stackoverflow.com/a/59527255/12299030? Or in this way https://stackoverflow.com/a/64301261/12299030? — Asperi, Nov 27 '20 at 15:03
Do you mean to have the look like the image you posted? If so, that is a shadow, not a blur. Does this help?: [https://www.hackingwithswift.com/quick-start/swiftui/how-to-draw-a-shadow-around-a-view](https://www.hackingwithswift.com/quick-start/swiftui/how-to-draw-a-shadow-around-a-view) — Yrb, Nov 27 '20 at 16:13

score 0 · Answer 1 · answered May 12 '22 at 14:07

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

score -1 · Answer 2 · answered Dec 01 '20 at 22:29

-1

You can just use

.blur(radius: showCustomAlertView ? 5 : 0)//<< here comes your blur

on your view to blur the view.

answered Dec 01 '20 at 22:29

davidev

7,034
3
12
47

@ davidev : thanks a lot for your code, but I already now that code, I wanted the alert area get blur not all screen – ios coder Dec 01 '20 at 22:47
Okay.. miss understood it then. Let me check again and edit my post – davidev Dec 01 '20 at 23:27

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

2 Answers2