How to apply shadow to interior views in SwiftUI?

Question

I have added a shadow around the VStack that holds my two text fields and a submit button. However, the shadow is also being applied to the two text fields inside the VStack.

Is there something I am missing here that is causing this to happen? I tried adding shadow(radius: 0) on the text fields, but it doesn't change anything. If I remove the padding and background from the text fields, then the shadow goes away.

var body: some View {     VStack() {         Spacer()          VStack() {             TextField($email, placeholder: Text("email"))                 .padding()                 .background(Color(red: 242 / 255, green: 242 / 255, blue: 242 / 255))              SecureField($password, placeholder: Text("password"))                 .padding()                 .background(Color(red: 242 / 255, green: 242 / 255, blue: 242 / 255))              Button(action: { self.login() }, label: { Text("Login").foregroundColor(Color.white) })                 .padding()                 .background(Color(red: 0, green: 116 / 255, blue: 217 / 255))         }         .padding()         .background(Color.white)         .shadow(radius: 10)          Spacer()     }     .padding()     .background(Color(red: 0, green: 116 / 255, blue: 217 / 255))     .edgesIgnoringSafeArea(.all) } 

Answer 1

You can use clipped() here to fix this

VStack() {     Text("Text")         .background(Color.red)         .padding()         .padding()      Text("Text")         .background(Color.purple)         .padding() } .padding() .background(Color.white)  .clipped() .shadow(color: Color.red, radius: 10, x: 0, y: 0) 

Output:

Hope it is helpful :)