AngularGradient vs ConicGradient in SwiftUI

Angular gradient is the gradient which applies the color function as the angle changes between the start and end angles, and anchored to a relative center point within the filled shape. Angular gradient conforms to ShapeStyle protocol meaning it can be applied to any view or modifier which expects a ShapeStyle.

Let’s create an example for Angular gradient.

struct AngularGradientExample: View {
    var body: some View {
        VStack {
            Text("DevTechie")
                .font(.largeTitle)
            
            RoundedRectangle(cornerRadius: 20)
                .foregroundStyle(.angularGradient(colors: [.pink, .orange], center: .center, startAngle: .degrees(0), endAngle: .degrees(360)))
                .frame(width: 200, height: 200)
        }
    }
}

Conic gradients is very similar to the Angular gradient with the only difference is that conic gradient doesn’t require start or end angle.

struct AngularGradientExample: View {
    var body: some View {
        VStack {
            Text("DevTechie")
                .font(.largeTitle)
            
            RoundedRectangle(cornerRadius: 20)
                .foregroundStyle(.angularGradient(colors: [.pink, .orange], center: .center, startAngle: .degrees(0), endAngle: .degrees(360)))
                .frame(width: 200, height: 200)
            
            RoundedRectangle(cornerRadius: 20)
                .foregroundStyle(.conicGradient(colors: [.pink, .orange], center: .center))
                .frame(width: 200, height: 200)
        }
    }
}

Conic gradient takes angle parameter as well which can be used to set the angle where the first color would start.

struct AngularGradientExample: View {
    var body: some View {
        VStack {
            Text("DevTechie")
                .font(.largeTitle)
            
            RoundedRectangle(cornerRadius: 20)
                .foregroundStyle(.angularGradient(colors: [.pink, .orange], center: .center, startAngle: .degrees(0), endAngle: .degrees(360)))
                .frame(width: 200, height: 200)
            
            RoundedRectangle(cornerRadius: 20)
                .foregroundStyle(.conicGradient(colors: [.pink, .orange], center: .center, angle: .degrees(270)))
                .frame(width: 200, height: 200)
        }
    }
}