15.7 C
Canberra
Wednesday, April 22, 2026

ios – Apply shadow solely exterior of a SwifUI clear button?


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.

transparent button image

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?

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

[td_block_social_counter facebook="tagdiv" twitter="tagdivofficial" youtube="tagdiv" style="style8 td-social-boxed td-social-font-icons" tdc_css="eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjM4IiwiZGlzcGxheSI6IiJ9LCJwb3J0cmFpdCI6eyJtYXJnaW4tYm90dG9tIjoiMzAiLCJkaXNwbGF5IjoiIn0sInBvcnRyYWl0X21heF93aWR0aCI6MTAxOCwicG9ydHJhaXRfbWluX3dpZHRoIjo3Njh9" custom_title="Stay Connected" block_template_id="td_block_template_8" f_header_font_family="712" f_header_font_transform="uppercase" f_header_font_weight="500" f_header_font_size="17" border_color="#dd3333"]
- Advertisement -spot_img

Latest Articles