ios – create a blur impact on signin

I’ve created a login web page however I’m attempting so as to add a view to encapsulate the textfield and add a blur impact.

Under is the present code I’ve:

var physique: some View {
        ZStack() {
            VStack(spacing: 16) {
                Spacer()
                VStack(spacing: 16) {
                    InputTextFieldView(textual content: $viewModel.credentials.electronic mail,
                                       placeholder: "E mail",
                                       keyboardType: .emailAddress,
                                       sfSymbol: "envelope")
                    
                    InputPasswordView(password: $viewModel.credentials.password,
                                      placeholder: "Password",
                                      sfSymbol: "lock")
                }
                HStack {
                    Spacer()
                    Button(motion: {
                        showForgotPassword.toggle()
                    }, label: {
                        Textual content("Forgot Password?")
                    })
                    .font(.system(dimension: 16, weight: .daring))
                    .sheet(isPresented: $showForgotPassword, content material:{
                        ForgotPasswordView()
                    })
                }
                
                VStack(spacing: 16) {
                    ButtonView(title: "Login") {
                        viewModel.login()
                    }
                    
                    HStack {
                        Textual content("Want an account? ")
                        Button(motion: {
                            showRegistration.toggle()
                        }, label: {
                            Textual content("Signup")
                        })
                        .font(.system(dimension: 16, weight: .daring))
                        .sheet(isPresented: $showRegistration, content material:{
                            RegisterView()
                        })
                    }
                }
            }
            .padding(.horizontal, 15)
           // .body(top: .infinity, alignment: .backside)
        }
        .navigationTitle("SignIn")
    }

The display screen appear to be:

However I’m attempting to attain this:

Don’t take note of the background picture, I’ll use a Zstack to attain this. I am principally seeking to obtain the underside container.

Any thought ?