When I apply the Material or blur effect to a LazyVStack with sticky header, the view doesn’t look uniform. When I tried .blur() and .opacity() options, the list item can be seen under the header while scrolling. With Material (ultrathin) the result was better but there was an obvious distinction/separation between the header and the list, please check the following images:

The design that I’d like to achieve (both content and header look like one piece)

What I could achieve

My implented code:

var basicDetails: some View {
        LazyVStack(spacing: 0, pinnedViews: [.sectionHeaders]) {
            
            Section {
                VStack {
                    Color.white.opacity(0.4)
                        .frame(height: 4)
                        .padding([.leading])

                RoundedRectangle(cornerRadius: 25)
                        .fill(Color.gray.opacity(0.5))
                    .frame(width: 50, height: 80)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding([.leading, .trailing, .bottom])
                    .padding(.top,4)
                    
                }
                    .padding(.top,12)
//                    .background(Color.init(hex: "9bad68"))
                    .background(.ultraThinMaterial)
                    .cornerRadius(10)
                    .padding(.bottom)
                    .padding(.top,-15)


            } header: {
                StickyHeader(img: "calendar", text: "Days With Tasks ")
//                    .clipShape(RoundedCorner(radius: 10, corners: [.bottomLeft, .bottomRight]))

            }
            
            
            Section {
                VStack(alignment: .leading, spacing: 10) {
                    Color.white.opacity(0.4)
                        .frame(height: 4)
                        .padding([.leading,.trailing])
                        .padding(.top,-2)

                    ForEach(arrToday) { task in
                        TaskRowView(info: task)
                    }
                }
//                .background(Color.init(hex: "9bad68"))
                .background(.ultraThinMaterial)
                .cornerRadius(10)
                .padding(.bottom)
                .padding(.top,-12)
            } header: {
                StickyHeader(img: "list.bullet", text: "Today's Tasks")
            }
        }
    }
}

struct StickyHeader: View {
    let img: String
    let text: String
    
    var body: some View {
        HStack (spacing: 10){
            Image(systemName: img)
                .resizable()
                .renderingMode(.template)
                .scaledToFit()
                .foregroundColor(.white)
                .frame(width: 16, height: 16)


            Text(text)
                .foregroundColor(.white)
            
            Spacer()
        }
        .padding()
//        .background(Color(hex: "9bad68"))
//        .background(.ultraThinMaterial)
        .background(
                    LinearGradient(
                        gradient: Gradient(colors: [
                            Color(hex: "b2c189"),
                            Color(hex: "c7d39e")
                        ]),
                        startPoint: .top,
                        endPoint: .bottom
                    )
                )
        .clipShape(RoundedCorner(radius: 10, corners: [.topLeft, .topRight]))

        
//        Color.white.opacity(0.4)
//            .frame(height: 1)
//            .padding([.leading,.trailing])

    }
}

I’d appreciate any pointer on how make the list uniform i.e, so they look like one single view.