How can I create such a strong blur in Swiftui?

Question

I'm currently working on an app and was wondering how I can manage to design the tasks in such a way that I can create such a large blur.

I have created a prototype but it doesn't work nearly as well, but here is my code.

struct BlurView: UIViewRepresentable {
    var style: UIBlurEffect.Style
    var opacity: Double
    
    func makeUIView(context: Context) -> UIVisualEffectView {
        let blurView = UIVisualEffectView(effect: UIBlurEffect(style: style))
        blurView.clipsToBounds = true
        blurView.alpha = CGFloat(opacity)
        return blurView
    }
    
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        uiView.effect = UIBlurEffect(style: style)
        uiView.alpha = CGFloat(opacity)
    }
}


struct Hintergrund: View {
    var body: some View {
        ZStack {
            BlurView(style: .systemUltraThinMaterialLight, opacity: 0.7)
            
            LinearGradient(gradient: Gradient(stops: [
                .init(color: .white.opacity(0), location: 0),
                .init(color: .white.opacity(0.1), location: 0.1),
                .init(color: .white.opacity(0.5), location: 0.5),
                .init(color: .white.opacity(0.5), location: 0.9), // Ändere die Position des letzten Haltepunkts
                .init(color: .white.opacity(0), location: 1),
            ]), startPoint: .topLeading, endPoint: .bottomTrailing)
            .cornerRadius(10)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            
            LinearGradient(gradient: Gradient(stops: [
                .init(color: .white.opacity(0), location: 0),
                .init(color: .white.opacity(0.1), location: 0.5),
                .init(color: .white.opacity(0), location: 1),
            ]), startPoint: .topTrailing, endPoint: .bottomLeading)
            .cornerRadius(10)
            .frame(maxWidth: .infinity, maxHeight: .infinity) 
        }
    }
}

Answer 1

Instead of a custom UIViewRepresentable, you should use this:

Rectangle()
    .foregroundStyle(.regularMaterial)

With this attempt you also have a lot of flexibility.

struct Hintergrund: View {
var body: some View {
    ZStack {
        Rectangle()
            .foregroundStyle(.regularMaterial)
            .opacity(0.7) // I would remove opacity
        LinearGradient(gradient: Gradient(stops: [
            .init(color: .white.opacity(0), location: 0),
            .init(color: .white.opacity(0.1), location: 0.1),
            .init(color: .white.opacity(0.5), location: 0.5),
            .init(color: .white.opacity(0.5), location: 0.9), // Ändere die Position des letzten Haltepunkts
            .init(color: .white.opacity(0), location: 1),
        ]), startPoint: .topLeading, endPoint: .bottomTrailing)
        .cornerRadius(10)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        
        LinearGradient(gradient: Gradient(stops: [
            .init(color: .white.opacity(0), location: 0),
            .init(color: .white.opacity(0.1), location: 0.5),
            .init(color: .white.opacity(0), location: 1),
        ]), startPoint: .topTrailing, endPoint: .bottomLeading)
        .cornerRadius(10)
        .frame(maxWidth: .infinity, maxHeight: .infinity) 
    }
}
}