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 themask(_:) 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:

Answer 3

As you only want the shadow to come on the top it would be better to use the offset values of the .shadow . I would suggest moving it roughly double the radius.

like this:

.shadow(color: Color.red, 
        radius: 10, 
        x: -20, // Horizontal offset
        y: 0) // Vertical offset

Answer 4

.shadow(color: Color.black, 
        radius: 5, 
        x: 5, // (left shadow "-X" & right shadow "+X")
        y: -5) // (top shadow "-Y" & bottom shadow "+Y")