How to create gradient colors in SwiftUI

A gradient color is a gradual blend between two or more colors. It can transition smoothly from one color to another, creating a spectrum of colors. Gradients are often used in graphic design, web design, and art to add depth, dimension, and visual interest to a piece.

SwiftUI provides excellent support for creating and customizing gradient colors in your user interfaces. This allows for creating visually appealing and dynamic effects. You can apply gradients to backgrounds, shapes, text, stroke borders, buttons, or list items.

Three popular types of gradients are Linear, Radial, Angular.

Linear Gradient

A linear gradient is a type of gradient in which colors transition smoothly along a straight line, either horizontally, vertically, or at any specified angle. This type of gradient creates a gradual blend between two or more colors, giving a seamless color transition effect.

struct ContentView: View {
    var body: some View {
        LinearGradient(
            gradient: Gradient(colors: [.red, .yellow]),
            startPoint: .topLeading,
            endPoint: .bottomTrailing
        )
        .frame(width: 200, height: 200)
    }
}

When using a linear gradient as a shape style, you can also use .linearGradient().

struct ContentView: View {
    var body: some View {
        Rectangle()
            .frame(width: 200, height: 200)
            .foregroundStyle(.linearGradient(
                colors: [.red, .yellow],
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            ))
    }
}

Radial Gradient

A radial gradient is a type of gradient where colors radiate outward from a central point, creating a circular or elliptical color transition. This type of gradient is commonly used to create a spotlight effect or to give a sense of depth and dimension to a design.

struct ContentView: View {
    var body: some View {
        RadialGradient(
            gradient: Gradient(colors: [.red, .yellow]),
            center: .center,
            startRadius: 5,
            endRadius: 200
        )
        .frame(width: 200, height: 200)
    }
}

When using a radial gradient as a shape style, you can also use .radialGradient().

struct ContentView: View {
    var body: some View {
         Rectangle()
            .frame(width: 200, height: 200)
            .foregroundStyle(.radialGradient(
                Gradient(colors: [.red, .yellow]),
                center: .center,
                startRadius: 5,
                endRadius: 200
            ))
    }
}

Angular Gradient

An angular gradient, also known as a conic gradient, is a type of gradient where colors transition around a central point in a circular or angular manner, like the segments of a pie chart. This gradient type creates a smooth color transition in a circular pattern, making it useful for various visual effects in design.

struct ContentView: View {
    var body: some View {
        AngularGradient(
            gradient: Gradient(colors: [.red, .yellow, .green, .blue]),
            center: .center
        )
        .frame(width: 200, height: 200)
    }
}

When using an angular gradient as a shape style, you can also use .angularGradient(), .conicGradient(), or similar methods.