Transparent Colour

We often want to use a transparent colour, perhaps as part of a gradient, so as not to fully cover the background when we overlay an element on it.

Here’s a way of achieving this:

struct ContentView: View {
    
    let transparentColor = Color(
        red: 0, 
        green: 0, 
        blue: 0, 
        opacity: 0
    )

    var body: some View {
        ZStack {
            Rectangle()
                .fill(
                    LinearGradient(
                        gradient: Gradient(
                            colors: [
                                .purple,
                                .black
                            ]
                        ),
                        startPoint: .top,
                        endPoint: .bottom
                    )
                )
            Circle()
                .fill(
                    LinearGradient(
                        gradient: Gradient(
                            colors: [
                                .yellow,
                                transparentColor
                            ]
                        ),
                        startPoint: .bottomLeading,
                        endPoint: .zero
                    )
                )
                .frame(width:170, height:170)
        }
        .ignoresSafeArea()
    }

}