Search code examples
iosswiftswiftuishadow

Apply Shadow to Button only bottom , left and right part in Swift UI


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 : enter image description here

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
    }

Solution

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

    enter image description here

    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)
            )
        }
    }