Apply inner shadow to view in swiftui

user_755094 0
Viewed 305

I wanted to create something like below image. I tried applying the shadow on inner side but it is not working enter image description here

Below is the code i tried :

ZStack(alignment: .leading) {
            RoundedRectangle(cornerRadius: 10).frame(width: 150, height: 10)
                .foregroundColor(.accentBG).overlay(Color.screenBG.opacity(0.5)).cornerRadius(10)
                .overlay(
                                  Rectangle()
                                    .stroke(Color.shadowColor, lineWidth: 2)
                                    .cornerRadius(10)
                                      .offset(x: 2, y: 2)
                                      .clipped()
                              )
                              
}

result of this code is something like : enter image description here

swiftui shadow
1 Answers

Preview Image

You can modify this code as per your needs

import SwiftUI

struct SwiftUIView: View {
    var body: some View {
        Capsule()
            .frame(width: 150, height: 15)
            .foregroundColor(Color(red: 236/255, green: 234/255, blue: 235/255))
            .overlay(
                Capsule()
                   .stroke(Color(red: 236/255, green: 234/255, blue: 235/255),
                           lineWidth: 3)
                   .shadow(color: Color(red: 192/255, green: 189/255, blue: 191/255),
                           radius: 3, x: 1.5, y: 1.5)
                   .clipShape(
                       Capsule()
                   )
            )
            .overlay(
                Capsule()
                    .frame(width: 50)
                    .foregroundColor(.blue)
                ,alignment: .leading
            )
            
    }
}

struct SwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIView()
            .previewLayout(.sizeThatFits)
            .padding()
    }
}
user_94375300
Related