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.[enter image description here]

(https://i.sstatic.net/KivN3iGy.png)

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) 
        }
    }
}