CODEWITHSUNDEEP
swiftuishadow
flymg
flymg

Reputation: 617

SwiftUI Remove inner shadow

How can the inner blue shadow be removed, keeping inside transparent?

Circle()
.frame(width: 30, height: 30, alignment: .center)
.padding()
.overlay(
    RoundedRectangle(cornerRadius: 20)
        .strokeBorder(Color.primary, lineWidth: 2)
        .shadow(color: Color.blue.opacity(1), radius: 3, x: 3, y: 3)
)

enter image description here

Upvotes: 2

Views: 1543

Answers (1)

Andrew Bogaevskyi
Andrew Bogaevskyi

Reputation: 2615

This solution look overloaded, but here we have 3 layers: shadow, mask and stroke.

Circle()
    .frame(width: 30, height: 30, alignment: .center)
    .padding()
    .overlay(
        ZStack {
            RoundedRectangle(cornerRadius: 20) // shadow layer
                .shadow(color: Color.blue.opacity(1), radius: 3, x: 3, y: 3)
            RoundedRectangle(cornerRadius: 20) // mask layer
                .blendMode(.destinationOut)
            RoundedRectangle(cornerRadius: 20) // stroke layer
                .strokeBorder(Color.primary, lineWidth: 2)
        }
            .compositingGroup()
    )

enter image description here

Check this article for more details How to apply a reverse mask in SwiftUI

Upvotes: 7

Related Questions