I’ve a SwiftUI button with a clear background, a rounded border, and a shadow.
The problem is that as a result of the button is clear, the shadow is seen each inside and outside the rounded rectangle. I would really like the shadow to look solely exterior the button, with out bleeding into the clear inside.

Here’s a minimal instance:
import SwiftUI
#Preview("StackOverflow Clear Button Shadow") {
let cornerRadius: CGFloat = 15
Button {} label: {
Textual content("Clear button")
.font(.system(measurement: 14, weight: .semibold))
.foregroundStyle(.black)
.padding(.horizontal, 16)
.padding(.vertical, 8)
.body(top: 40, alignment: .middle)
}
.background(.white)
.clipShape(RoundedRectangle(cornerRadius: cornerRadius))
.overlay {
RoundedRectangle(cornerRadius: cornerRadius)
.stroke(.purple, lineWidth: 1)
.shadow(
colour: .blue,
radius: 2,
x: 0,
y: 0
)
}
.padding(48)
.background(Coloration.white)
}
This produces a glow across the border, however the shadow can be rendered contained in the clear space of the button.
What I would like is:
- preserve the button background clear
- preserve the rounded border seen
- apply the shadow/glow solely exterior the rounded rectangle
- keep away from any shadow showing contained in the button
Is there a really useful SwiftUI solution to masks or clip the shadow in order that it solely renders exterior the form?
