Compared with pure color, the gradient can enrich the image and give users a more substantial visual impact.

Steps:

• First, create a Text to show the effect of the gradient.

• Set the font size of the Text to 36.

• Set the padding of the Text.

• Set Text's foregroundColor to white.

• Finally, add a background to the Text. LinearGradient will be placed in brackets.

• Create a LinearGradient.

• Set the starting color of LinearGradient to red, the middle color to green, and the end color to blue.

• Set the startPoint of the gradient at the upper left corner of the Text and the gradient's endPoint at the Text's lower right corner.

struct ContentView: View {
    
    var body: some View {
        VStack {
            Text("SwiftUI Gradient!")
                .font(.system(size: 36))
                .padding()
                .foregroundColor(.white)
                .background(
                    LinearGradient(gradient: Gradient(colors: [.red, .green, .blue]),
                                   startPoint: .topLeading,
                                   endPoint: .bottomTrailing)
                )
        }
    }
}

Follow me on:

(Foks) Hui Wang's LinkedIn