How to set gradient background in SwiftUI

This tutorial will help you set gradient background color in SwiftUI. Fortunately, SwiftUI has made it very easy to set gradient colors in your views. SwiftUI provides us with built-in gradients and we just have to use them for setting our gradient background.

What this blog will cover :

• how to use the Linear Gradient
• how to set the gradient background of the button
• frame, edgesIgnoringSafeArea, and corner radius modifier

Gradients in SwiftUI

SwiftUI comes with three gradients which we can use on any view to set the gradient background.

• Linear Gradient
• Angular Gradient
• Radial Gradient

Syntax:

            LinearGradient(gradient:  , startPoint:  , endPoint: )

Now let’s see how we’ll use it.

struct ContentView: View {
        var body: some View {

            LinearGradient(gradient: Gradient(colors: [.indigo,.mint]), startPoint: .top, endPoint: .bottom)
            .edgesIgnoringSafeArea(.all)
    }
}

• The gradient parameter here simply requires an array of colors so you can give as many colors as you want.
• edgesIgnoringSafeArea: this modifier is used for covering the entire screen.

In a similar way, you can use the other two gradients.

Likewise, We can also use it in a VStack like this

struct ContentView: View {
        var body: some View {

          VStack{
                
                LinearGradient(gradient: Gradient(colors: [.indigo,.mint]), startPoint: .topLeading, endPoint: .bottomTrailing)
                .edgesIgnoringSafeArea(.all)
                
       }
  
    }
}

Setting Button’s Gradient background

For setting a gradient background on a button we will be using a background modifier.

struct ContentView: View {
        var body: some View {

          Button(action: {
                
            }, label: {
                Text("LogIn").fontWeight(.heavy).foregroundColor(.white).padding()
            })
            .frame(width: 200,height: 60)
            .background( LinearGradient(gradient: Gradient(colors: [.indigo,.mint]), startPoint: .topLeading, endPoint: .bottomTrailing))
            .cornerRadius(25)

    }
}

• frame modifier is used for giving a fixed size to your button.
• cornerRadius modifier is used for round edges to your button.

For some strange reason, The Frame modifier should be the first modifier you use for modifying your button. Otherwise, the code will not work properly. So it always comes right after the parenthesis.

*link*

Here’s the complete code for your reference

import SwiftUI

struct ContentView: View {
        var body: some View {

          Button(action: {
                
            }, label: {
                Text("LogIn").fontWeight(.heavy).foregroundColor(.white).padding()
            })
            .frame(width: 200,height: 60)
            .background(    LinearGradient(gradient: Gradient(colors: [.indigo,.mint]), startPoint: .topLeading, endPoint: .bottomTrailing))
                .cornerRadius(25)
                
         //   LinearGradient(gradient: Gradient(colors: [.indigo,.mint]), startPoint: .top, endPoint: .bottom).edgesIgnoringSafeArea(.all)
            
            /*VStack{
                LinearGradient(gradient: Gradient(colors: [.indigo,.mint]), startPoint: .topLeading, endPoint: .bottomTrailing).edgesIgnoringSafeArea(.all)
                
            }*/
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Also read: TabView and TabItem() in SwiftUI