Below is my code : This code gives shadow to all part of button. I only want to give shadow to bottom part of button

Button should look like something like this :

var body: some View {
        Button(action: {
            self.action(self.title)
            self.hover.toggle()
        }) {
            if title == "x" {
                ZStack {
                    Image(systemName: "delete.left").cornerRadius(5).font(Font.system(size: 28, weight: .medium))
                    .background(Color..secondaryBG)
                    .accentColor(.accentTint)
                }
            } else {
                Text(title).customText(titleColor: .accentTint, fontName: .gothamMedium, fontSize: 28)
                    .background(Color.secondaryBG)
            }
        }
        .withBackground(color: .accentTint)
            .frame(width: 76, height: 76)
            .cornerRadius(5)
            .shadow(color: .numberPadShadowColor, radius: 5, x: 0, y: 1) // This gives shadow to all the parts. I do not want to give shadow to top part of button
    }

CodePudding user response：

What you show is more like a drop shadow with hard edges:

give it a solid background and shift it down:

struct ContentView: View {
    var body: some View {
        Button(action: {
            //
        }) {
            Image(systemName: "delete.left")
                .font(Font.system(size: 28, weight: .medium))
                .foregroundColor(.black)
        }
        .frame(width: 76, height: 76)
        .background(Color(uiColor: .lightGray))
        .cornerRadius(5)
        
        .background(
            RoundedRectangle(cornerRadius: 5)
                .offset(x: 0, y: 1)
        )
    }
}