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 blurred through effect as we know. How i can do this in SwiftUi?

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

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 3 · Accepted Answer · 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 0 · Answer 2 · answered Dec 01 '20 at 22:29

0

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,694
5
21
56

@ 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