SwiftUI - How to show shadow only on top side?

Question

I am trying to give shadow to my VStack (only at top) but when I do like below shadow is visible to all sides like button, Text. But I am trying to give border to only container.

.background(Color.white // any non-transparent background
               .shadow(color: Color.red, radius: 10, x: 0, y: 0)
             )

I want UI like below

Thank you for help

Answer 1

Try using the mask(_:) modifier, as shown in this answer.

.background(
    Color.white // any non-transparent background
        .shadow(color: Color.red, radius: 10, x: 0, y: 0)
        .mask(Rectangle().padding(.top, -20)) /// here!
)

Result:

Answer 2

You could put a LinearGradient at the top of the VStack to achieve the "top shadow" effect.

VStack(spacing: 0) {
   LinearGradient(colors: [.white, Color(.sRGB, white: 0.85, opacity: 1)], startPoint: .top, endPoint: .bottom)
       .frame(height: 6)
       .opacity(0.8)

    // Button()...
}

Result: