Gradient Border in SwiftUI

In this SwiftUI tutorial, we’ll learn how to make gradient borders in SwiftUI. We’ll be using the LinearGradient that SwiftUI provides us for giving gradient color to our views and a border modifier for achieving a gradient border.

What this blog will cover:

• Gradient Border
• LinearGradient
• RoundedRectangle
• overlay

Let’s see how we provide gradient color to borders in SwiftUI.

You can also check Gradient Animation in SwiftUI

Button with a gradient border

struct ContentView:View{
    
    var body: some View {
        
        VStack(spacing: 20){
            
            Button("bordered button"){
                
            }
            .frame(width: 200, height: 50)
            .background(Color.teal)
            .foregroundColor(Color.white)
            .fontWeight(.bold)
            .border(Color.orange,width: 3)
     
      }
  }
}

This is the code for a simple bordered Button.

Just change the color in the border modifier to LinearGradient. It takes an array of colors as input so you can provide as many colors as you’d like and it will present the colors in a gradient.

 LinearGradient(
                colors: [.purple, .yellow,.purple],
                startPoint: .topLeading,
                endPoint: .bottomTrailing)

struct ContentView:View{
    
    var body: some View {
        
        VStack{
            
            Button("bordered button"){
                
            }
            .frame(width: 200, height: 50)
            .background(Color.teal)
            .foregroundColor(Color.white)
            .fontWeight(.bold)
            .border(LinearGradient(
                colors: [.purple, .yellow,.purple],
                startPoint: .topLeading,
                endPoint: .bottomTrailing),width: 3)
       
       }
   }
}

Rounded Button with a gradient border

Now if we want to provide a rounded border to a button the above code won’t work. The border modifier cannot be modified to a rounded border. Therefore, we would have to use an overlay modifier for creating a rounded border.

You can learn: Round corners of a border in SwiftUI

The overlay modifier provides a new view in front of the current view. So in that new view, we’ll use RoundedRectangle for creating a rounded border.

struct ContentView:View{
    
    var body: some View {

        VStack(spacing: 20){
          
            Button("bordered button"){

            }
            .frame(width: 200,height: 50)
            .foregroundColor(Color.white)
            .fontWeight(.bold)
            .background(Color.indigo)
            .overlay(
                RoundedRectangle(cornerRadius: 25)
                    .stroke(Color.orange, lineWidth: 5)
            )
            .cornerRadius(25)

     }
  }
}

Now just change the color of the stroke of the rounded rectangle to LinearGradient and we’ll have our gradient border.

struct ContentView:View{
    
    var body: some View {
   
       VStack(spacing: 20){
   
         Button("bordered button"){

            }
            .frame(width: 200,height: 50)
            .foregroundColor(Color.white)
            .fontWeight(.bold)
            .background(Color.indigo)
            .overlay(
                RoundedRectangle(cornerRadius: 25)
                    .stroke(   LinearGradient(
                                        colors: [.orange, .teal,.orange],
                                        startPoint: .topLeading,
                                        endPoint: .bottomTrailing)
                                , lineWidth: 5)
            )
            .cornerRadius(25)

        }
    }
}