gradient on Software Development Notes

Animate background with color gradient in SwiftUI

Eric Callanan — Sunday, 30 Jul 2023

Animating the background of an app with a color gradient in SwiftUI can be a great way to enhance your app. By animating a change in the color gradient of the background, you can make your app feel more dynamic and engaging. One way to achieve this effect is by using AngularGradient to keep the background moving. However, other color gradients could easily be used instead.

Related articles on color gradients in SwiftUI:

LinearGradient in SwiftUI

AngularGradient in SwiftUI

RadialGradient in SwiftUI

Animate background with color gradient in SwiftUI

AngularGradient in a rectangle

Let's start with a simple AngularGradient such as that described in Simple AngularGradient in SwiftUI. The center point of the AngularGradient is animated to move through a list of UnitPoints every two seconds. The UnitPoints are relative to the frame containing the AngularGradient. The colors and the duration of the animation can be modified to achieve the desired effect.

 1struct AngularGradientView: View {
 2    @State private var centerPointIndex = 0
 3    
 4    let timer = Timer.publish(every: 2,
 5                              on: .main,
 6                              in: .common).autoconnect()
 7    
 8    let oneColor = [Color(hue: 0.01, saturation: 0.2, brightness: 0.9),
 9                    Color(hue: 0.01, saturation: 1.0, brightness: 0.9)]
10    
11    let unitPoints: [UnitPoint] = [
12        .init(x:0.2, y: 0.8),
13        .init(x:0.5, y: 0.2),
14        .init(x:0.8, y: 0.9)]
15    
16    var body: some View {
17        VStack {
18            Rectangle()
19                .fill(
20                    AngularGradient(colors: oneColor,
21                                    center: unitPoints[centerPointIndex])
22                )
23                .animation(Animation.easeInOut.speed(0.2),
24                           value: centerPointIndex)
25                .frame(width: 400, height: 400)
26                .onReceive(timer) { input in
27                    centerPointIndex = (centerPointIndex + 1) % unitPoints.count
28                }
29        }
30        .padding()
31    }
32}

Animate moving the center of an AngularGradient in SwiftUI

Full background

Place the AngularGradient in a ZStack and modify the view to ignore the safe areas to use it as a background in SwiftUI. This will ensure that the gradient fills the entire screen and moves as the background.

 1struct FullBackgroundView: View {
 2    @State private var centerPointIndex = 0
 3    
 4    let timer = Timer.publish(every: 2,
 5                              on: .main,
 6                              in: .common).autoconnect()
 7    
 8    let oneColor = [Color(hue: 0.01, saturation: 0.2, brightness: 0.9),
 9                    Color(hue: 0.01, saturation: 1.0, brightness: 0.9)]
10    
11    let unitPoints: [UnitPoint] = [
12        .init(x:0.2, y: 0.8),
13        .init(x:0.5, y: 0.2),
14        .init(x:0.8, y: 0.9)]
15    
16    var body: some View {
17        ZStack {
18            Rectangle()
19                .fill(
20                    AngularGradient(colors: oneColor,
21                                    center: unitPoints[centerPointIndex])
22                )
23                .animation(Animation.easeInOut.speed(0.20),
24                           value: centerPointIndex)
25                .onReceive(timer) { input in
26                    centerPointIndex = (centerPointIndex + 1) % unitPoints.count
27                }
28                .edgesIgnoringSafeArea(.all)
29        }
30    }
31}

Animate AngularGradient for entire background in SwiftUI

Purple color

Tweak the colors to use an array of alternating colors to create a star like pattern and adjust the time slightly.

 1struct PurpleBackgroundView: View {
 2    @State private var centerPointIndex = 0
 3    
 4    let timer = Timer.publish(every: 3,
 5                              on: .main,
 6                              in: .common).autoconnect()
 7    
 8    let oneColor = [Color(hue: 285.0/360.0, saturation: 0.2, brightness: 1.0),
 9                    Color(hue: 285.0/360.0, saturation: 0.4, brightness: 1.0),
10                    Color(hue: 285.0/360.0, saturation: 0.2, brightness: 1.0),
11                    Color(hue: 285.0/360.0, saturation: 0.4, brightness: 1.0),
12                    Color(hue: 285.0/360.0, saturation: 0.2, brightness: 1.0),
13                    Color(hue: 285.0/360.0, saturation: 0.4, brightness: 1.0),
14                    Color(hue: 285.0/360.0, saturation: 0.2, brightness: 1.0)]
15    
16    let unitPoints: [UnitPoint] = [
17        .init(x:0.2, y: 0.8),
18        .init(x:0.1, y: 0.3),
19        .init(x:0.9, y: 0.1),
20        .init(x:0.8, y: 0.9)]
21
22    var body: some View {
23        ZStack {
24            Rectangle()
25                .fill(
26                    AngularGradient(colors: oneColor,
27                                    center: unitPoints[centerPointIndex])
28                )
29                .backgroundStyle(.regularMaterial)
30                .animation(Animation.easeInOut.speed(0.08),
31                           value: centerPointIndex)
32                .onReceive(timer) { input in
33                    centerPointIndex = (centerPointIndex + 1) % unitPoints.count
34                }
35                .edgesIgnoringSafeArea(.all)
36        }
37    }
38}

Use alternating colors in AngularGradient for star effect in SwiftUI

Use Material

A blur effect can be applied over the animated AngularGradient with the use of Material in SwiftUI. This adds a layer over the background and tones down the animation so it is not too distracting. This does seem to hide the animation too much.

 1    struct MaterialBackgroundView: View {
 2    @State private var centerPointIndex = 0
 3    
 4    let timer = Timer.publish(every: 3,
 5                              on: .main,
 6                              in: .common).autoconnect()
 7    
 8    let oneColor = [Color(hue: 285.0/360.0, saturation: 0.2, brightness: 1.0),
 9                    Color(hue: 285.0/360.0, saturation: 0.4, brightness: 1.0),
10                    Color(hue: 285.0/360.0, saturation: 0.2, brightness: 1.0),
11                    Color(hue: 285.0/360.0, saturation: 0.4, brightness: 1.0),
12                    Color(hue: 285.0/360.0, saturation: 0.2, brightness: 1.0),
13                    Color(hue: 285.0/360.0, saturation: 0.4, brightness: 1.0),
14                    Color(hue: 285.0/360.0, saturation: 0.2, brightness: 1.0)]
15    
16    let unitPoints: [UnitPoint] = [
17        .init(x:0.2, y: 0.8),
18        .init(x:0.1, y: 0.3),
19        .init(x:0.9, y: 0.1),
20        .init(x:0.8, y: 0.9)]
21    
22    var body: some View {
23        ZStack {
24            Rectangle()
25                .fill(
26                    AngularGradient(colors: oneColor,
27                                    center: unitPoints[centerPointIndex])
28                )
29                .backgroundStyle(.regularMaterial)
30                .animation(Animation.easeInOut.speed(0.08),
31                           value: centerPointIndex)
32                .onReceive(timer) { input in
33                    centerPointIndex = (centerPointIndex + 1) % unitPoints.count
34                }
35                .edgesIgnoringSafeArea(.all)
36
37            Rectangle()
38                .background(.ultraThinMaterial)
39                .edgesIgnoringSafeArea(.all)
40        }
41    }
42}

Use material layer over the animated AngularGradient change in SwiftUI

Use Color with Opacity

An alternative way to tone down the animation is to place a color layer over the background and controll how much of the background is seen with the opacity setting.

 1struct ColorBackgroundView: View {
 2    @State private var centerPointIndex = 0
 3    
 4    let timer = Timer.publish(every: 3,
 5                              on: .main,
 6                              in: .common).autoconnect()
 7    
 8    let oneColor = [Color(hue: 285.0/360.0, saturation: 0.7, brightness: 1.0),
 9                    Color(hue: 285.0/360.0, saturation: 0.9, brightness: 1.0),
10                    Color(hue: 285.0/360.0, saturation: 0.7, brightness: 1.0),
11                    Color(hue: 285.0/360.0, saturation: 0.9, brightness: 1.0),
12                    Color(hue: 285.0/360.0, saturation: 0.7, brightness: 1.0),
13                    Color(hue: 285.0/360.0, saturation: 0.9, brightness: 1.0),
14                    Color(hue: 285.0/360.0, saturation: 0.7, brightness: 1.0)]
15    
16    let unitPoints: [UnitPoint] = [
17        .init(x:0.2, y: 0.8),
18        .init(x:0.1, y: 0.3),
19        .init(x:0.9, y: 0.1),
20        .init(x:0.8, y: 0.9)]
21    
22    var body: some View {
23        ZStack {
24            Rectangle()
25                .fill(
26                    AngularGradient(colors: oneColor,
27                                    center: unitPoints[centerPointIndex])
28                )
29                .backgroundStyle(.regularMaterial)
30                .animation(Animation.easeInOut.speed(0.08),
31                           value: centerPointIndex)
32                .onReceive(timer) { input in
33                    centerPointIndex = (centerPointIndex + 1) % unitPoints.count
34                }
35                .edgesIgnoringSafeArea(.all)
36
37            Rectangle()
38                .fill(.white.opacity(0.5))
39                .edgesIgnoringSafeArea(.all)
40        }
41    }
42}

Use color layer over the animated AngularGradient change in SwiftUI

Cards with material background

This is an example of series of cards, showing images, over the animated background that is behind a material.

 1struct MaterialCardsView: View {
 2    @State private var centerPointIndex = 0
 3    
 4    let timer = Timer.publish(every: 3,
 5                              on: .main,
 6                              in: .common).autoconnect()
 7    
 8    let oneColor = [Color(hue: 285.0/360.0, saturation: 0.2, brightness: 1.0),
 9                    Color(hue: 285.0/360.0, saturation: 0.4, brightness: 1.0),
10                    Color(hue: 285.0/360.0, saturation: 0.2, brightness: 1.0),
11                    Color(hue: 285.0/360.0, saturation: 0.4, brightness: 1.0),
12                    Color(hue: 285.0/360.0, saturation: 0.2, brightness: 1.0),
13                    Color(hue: 285.0/360.0, saturation: 0.4, brightness: 1.0),
14                    Color(hue: 285.0/360.0, saturation: 0.2, brightness: 1.0)]
15    
16    let unitPoints: [UnitPoint] = [
17        .init(x:0.2, y: 0.8),
18        .init(x:0.1, y: 0.3),
19        .init(x:0.9, y: 0.1),
20        .init(x:0.8, y: 0.9)]
21    
22    let imageList = ["castle1", "mountain4", "mountain1", "mountain2", "mountain3", "castle2", "mountain5"]
23    
24    var body: some View {
25        ZStack {
26            Rectangle()
27                .fill(
28                    AngularGradient(colors: oneColor,
29                                    center: unitPoints[centerPointIndex])
30                )
31                .backgroundStyle(.regularMaterial)
32                .animation(Animation.easeInOut.speed(0.08),
33                           value: centerPointIndex)
34                .onReceive(timer) { input in
35                    centerPointIndex = (centerPointIndex + 1) % unitPoints.count
36                }
37                .edgesIgnoringSafeArea(.all)
38            
39            Rectangle()
40                .background(.ultraThinMaterial)
41                .edgesIgnoringSafeArea(.all)
42            
43            ScrollView {
44                VStack(spacing: 30) {
45                    ForEach(0..<imageList.count, id: \.self) { index in
46                        CardView(imageName: imageList[index])
47                            .frame(width: 350, height: 200)
48                    }
49                    Spacer()
50                }
51                .padding()
52            }
53        }
54    }
55}

Display cards on material over animated background

Cards with color background

This is an example of series of cards, showing images, over the animated background that is behind an opaque color layer. The use of opacity can be a great way to control how much of the animation is seen.

 1struct ColorWithCardsView: View {
 2    @State private var centerPointIndex = 0
 3    
 4    let timer = Timer.publish(every: 3,
 5                              on: .main,
 6                              in: .common).autoconnect()
 7    
 8    let oneColor = [Color(hue: 285.0/360.0, saturation: 0.7, brightness: 1.0),
 9                    Color(hue: 285.0/360.0, saturation: 0.9, brightness: 1.0),
10                    Color(hue: 285.0/360.0, saturation: 0.7, brightness: 1.0),
11                    Color(hue: 285.0/360.0, saturation: 0.9, brightness: 1.0),
12                    Color(hue: 285.0/360.0, saturation: 0.7, brightness: 1.0),
13                    Color(hue: 285.0/360.0, saturation: 0.9, brightness: 1.0),
14                    Color(hue: 285.0/360.0, saturation: 0.7, brightness: 1.0)]
15    
16    let unitPoints: [UnitPoint] = [
17        .init(x:0.2, y: 0.8),
18        .init(x:0.1, y: 0.3),
19        .init(x:0.9, y: 0.1),
20        .init(x:0.8, y: 0.9)]
21    
22    let imageList = ["castle1", "mountain4", "mountain1", "mountain2", "mountain3", "castle2", "mountain5"]
23    
24    var body: some View {
25        ZStack {
26            Rectangle()
27                .fill(
28                    AngularGradient(colors: oneColor,
29                                    center: unitPoints[centerPointIndex])
30                )
31                .backgroundStyle(.regularMaterial)
32                .animation(Animation.easeInOut.speed(0.08),
33                           value: centerPointIndex)
34                .onReceive(timer) { input in
35                    centerPointIndex = (centerPointIndex + 1) % unitPoints.count
36                }
37                .edgesIgnoringSafeArea(.all)
38
39            Rectangle()
40                .fill(.white.opacity(0.5))
41                .edgesIgnoringSafeArea(.all)
42            
43            
44            ScrollView {
45                VStack(spacing: 30) {
46                    ForEach(0..<3, id: \.self) { index in
47                        CardView(imageName: imageList[index])
48                            .frame(width: 350, height: 200)
49                    }
50                    Spacer()
51                }
52                .padding()
53            }
54        }
55    }
56}

Display cards on color over animated background

Conclusion

Animating a change in the color gradient of the background can make your app feel more dynamic and engaging. This article demonstrated one way to achieve this effect is by using AngularGradient to keep the background moving. There is a balance between animation to make the app engaging and animation that can be distracting. A Material layer can be used to tone down the background, but this seems to hide the background too much. A color layer seems a better fit with control of how much of the background animation is shown controlled by the opacity level.

The source code for ColorGradientApp is available on GitHub.

RadialGradient in SwiftUI

Eric Callanan — Sunday, 09 Jul 2023

RadialGradient in SwiftUI is used to create a color gradient of two or more colors where the colors change as distance increases from a center point outwards. The colors are scaled to fit within the defined start and end radii.

The RadialGradient object is initialized with an array of colors that are shown in increasing concentric circles ordered from a center point, with the initial color filling in from the center point to the startRadius and the final color filling the view outside the endRadius. SwiftUI automatically interpolates between the colors as the circles increase. RadialGradient can be adjusted by changing its center and the startRadius and endRadius parameters to create different effects.

Related articles on color gradients in SwiftUI:

LinearGradient in SwiftUI

AngularGradient in SwiftUI

RadialGradient in SwiftUI

Animate background with color gradient in SwiftUI

Simple Radial Gradient

We'll reuse the arrays of colors defined in LinearGradient in SwiftUI. The view shows RadialGradient with two colors and with seven colors, specifying the center point of the gradient as the center of the view. The initial color starts at the center (startRadius of 0) and moves outwards from the center to edge of the frame (endRadius of 150) in a frame that 300 by 300.

AppColors

 1struct AppColors {
 2    static let oneColor = [Color(hue: 0.01, saturation: 0.2, brightness: 0.9),
 3                           Color(hue: 0.01, saturation: 1.0, brightness: 0.9)]
 4
 5    static let twoColors = [Color.blue, .yellow]
 6
 7    static let rainbow = [
 8        Color.red,
 9        .orange,
10        .yellow,
11        .green,
12        .blue,
13        Color(hue: 0.773, saturation: 1.0, brightness: 0.51),
14        Color(hue: 0.771, saturation: 1.0, brightness: 1.00)
15    ]
16
17    static let rainbowClear = [
18        Color.clear,
19        .red,
20        .orange,
21        .yellow,
22        .green,
23        .blue,
24        Color(hue: 0.773, saturation: 1.0, brightness: 0.51),
25        Color(hue: 0.771, saturation: 1.0, brightness: 1.00),
26        .clear
27    ]
28}

StartRadialGradientView

 1struct StartRadialGradientView: View {
 2    var body: some View {
 3        VStack {
 4            Text("RadialGradient")
 5                .font(.largeTitle)
 6                .fontWeight(.bold)
 7            Divider()
 8            
 9            VStack(spacing: 0) {
10                Text("Two colors")
11                    .font(.title)
12                    .fontWeight(.bold)
13                
14                RoundedRectangle(cornerRadius: 20)
15                    .fill(
16                        RadialGradient(colors: AppColors.twoColors,
17                                       center: .center,
18                                       startRadius: 0,
19                                       endRadius: 150)
20                    )
21                    .frame(width: 300, height: 300)
22            }
23            Divider()
24
25            VStack(spacing: 0) {
26                Text("Seven colors")
27                    .font(.title)
28                    .fontWeight(.bold)
29                
30                RoundedRectangle(cornerRadius: 20)
31                    .fill(
32                        RadialGradient(colors: AppColors.rainbow,
33                                       center: .center,
34                                       startRadius: 0,
35                                       endRadius: 150)
36                    )
37                    .frame(width: 300, height: 300)
38            }
39            
40            Spacer()
41        }
42    }
43}

Simple Radial Gradient specifying the colors, center and radii in SwiftUI

Standard center options of RadialGradient

An array of colors and a start and end radii are required to initialise a RadialGradient. This code displays how the seven colors are shown using the different standard center point options. The last color in the array of colors (violet) is used to fill in all the remaining area in the frame outside the endRadius.

RadialGradientView

 1struct RadialGradientView: View {
 2    var center: UnitPointType
 3
 4    var body: some View {
 5        HStack {
 6            VStack {
 7                Text("\(center.rawValue)").font(.title2)
 8            }
 9            RoundedRectangle(cornerRadius: 20)
10                .fill(
11                    RadialGradient(colors: AppColors.rainbow,
12                                   center: center.unitPoint,
13                                   startRadius: 0,
14                                   endRadius: 50)
15                )
16                .frame(width: 100, height: 100)
17        }
18    }
19}

CenterOptionsView

 1struct CenterOptionsView: View {
 2    var body: some View {
 3        ScrollView {
 4            VStack {
 5                Text("All Center Options")
 6                    .font(.largeTitle)
 7                    .fontWeight(.bold)
 8                Divider()
 9                
10                VStack(alignment: .trailing) {
11                    ForEach(UnitPointType.allCases, id: \.self) { endinging in
12                        RadialGradientView(center: endinging)
13                    }
14                }
15            }
16        }
17    }
18}

Standard center options for Radial Gradient in SwiftUI

Animate movement of center of RadialGradient

It can be easier to see the effect of setting the center point of the RadialGradient by animating the change from one center point to another.

AnimateCenterView

 1struct AnimateCenterView: View {
 2    @State private var centerPointIndex = 4
 3    
 4    let timer = Timer.publish(every: 2,
 5                              on: .main,
 6                              in: .common).autoconnect()
 7    
 8    var body: some View {
 9        VStack {
10            Text("Move center")
11                .font(.largeTitle)
12                .fontWeight(.bold)
13            
14            Rectangle()
15                .fill(
16                    RadialGradient(colors: AppColors.rainbow,
17                                   center: UnitPointType.allCases[centerPointIndex].unitPoint,
18                                   startRadius: 5,
19                                   endRadius: 250)
20                )
21                .animation(Animation.easeInOut.speed(0.2),
22                           value: centerPointIndex)
23                .frame(width: 400, height: 400)
24                .onReceive(timer) { input in
25                    centerPointIndex = (centerPointIndex + 1) % UnitPointType.allCases.count
26                }
27            
28            
29            VStack(alignment: .leading)  {
30                HStack() {
31                    Text("center: ")
32                    Text(" \(UnitPointType.allCases[centerPointIndex].rawValue)")
33                        .animation(Animation.easeInOut.speed(0.6),
34                               value: centerPointIndex)
35                    Spacer()
36                }
37                .padding()
38                .font(.title)
39                .fontWeight(.bold)
40            }
41            
42            Spacer()
43        }
44        .padding()
45    }
46}

Animate movement of center of Radial Gradient in SwiftUI

Setting start radius and end radius of RadialGradient

This code keeps the center point of the RadialGradient in the center of the frame and shows the effect of setting different start and end radii. The color from the center point to the startRadius is filled in with the initial color in the color array, while any area outside the endRadius is filled with the last color.

StartEndRadiusView

 1struct StartEndRadiusView: View {
 2    var body: some View {
 3        VStack(spacing: 30) {
 4            Text("Start and End Radius")
 5                .font(.title)
 6                .fontWeight(.bold)
 7            
 8            VStack(alignment: .trailing) {
 9                HStack {
10                    Spacer()
11                    VStack(alignment: .trailing)  {
12                        Text("Start Radius =   0")
13                        Text("End Radius = 50")
14                    }
15                    RoundedRectangle(cornerRadius: 20)
16                        .fill(
17                            RadialGradient(colors: AppColors.rainbow,
18                                           center: .center,
19                                           startRadius: 0,
20                                           endRadius: 50)
21                        )
22                        .frame(width: 200, height: 200)
23                }
24            }
25            
26            VStack(alignment: .trailing) {
27                HStack {
28                    Spacer()
29                    VStack(alignment: .trailing)  {
30                        Text("Start Radius =   50")
31                        Text("End Radius = 150")
32                    }
33                    RoundedRectangle(cornerRadius: 20)
34                        .fill(
35                            RadialGradient(colors: AppColors.rainbow,
36                                           center: .center,
37                                           startRadius: 50,
38                                           endRadius: 150)
39                        )
40                        .frame(width: 200, height: 200)
41                }
42            }
43            
44            VStack(alignment: .trailing) {
45                HStack {
46                    Spacer()
47                    VStack(alignment: .trailing)  {
48                        Text("Center = (0.2, 0.8)")
49                        Text("Start Radius =   0")
50                        Text("End Radius = 50")
51                    }
52                    RoundedRectangle(cornerRadius: 20)
53                        .fill(
54                            RadialGradient(colors: AppColors.rainbow,
55                                           center: UnitPoint(x: 0.2, y: 0.8),
56                                           startRadius: 0,
57                                           endRadius: 50)
58                        )
59                        .frame(width: 200, height: 200)
60                }
61            }
62
63            Spacer()
64            
65        }
66        .padding()
67    }
68}

AnimateRadiiView

 1struct AnimateRadiiView: View {
 2    @State private var startRadius:CGFloat = 0
 3    @State private var endRadius:CGFloat = 100
 4    
 5    let timer = Timer.publish(every: 2,
 6                              on: .main,
 7                              in: .common).autoconnect()
 8    
 9    func randomRadii() -> (CGFloat, CGFloat) {
10        let radius1 = CGFloat(Double.random(in: 0...100))
11        let radius2 = CGFloat(Double.random(in: 0...200))
12        
13        return (min(radius1, radius2), max(radius1, radius2))
14    }
15    
16    var body: some View {
17        VStack {
18            Text("Change Start & End Radii")
19                .font(.title)
20                .fontWeight(.bold)
21            
22            Rectangle()
23                .fill(
24                    RadialGradient(colors: AppColors.rainbow,
25                                   center: .center,
26                                   startRadius: startRadius,
27                                   endRadius: endRadius)
28                )
29                .animation(Animation.easeInOut.speed(0.2),
30                           value: startRadius)
31                .frame(width: 400, height: 400)
32                .onReceive(timer) { _ in
33                    (startRadius, endRadius) = randomRadii()
34                }
35            
36            
37            VStack(alignment: .trailing)  {
38                HStack() {
39                    Spacer()
40                    Text("Start Radius: ")
41                        .font(.title2)
42                    Text("\(startRadius, specifier: "%.2F")")
43                        .font(.title)
44                        .frame(width: 130)
45                        .animation(Animation.easeInOut.speed(0.6),
46                                   value: startRadius)
47                }
48                HStack() {
49                    Spacer()
50                    Text("End Radius: ")
51                        .font(.title2)
52                    Text("\(endRadius, specifier: "%.2F")")
53                        .font(.title)
54                        .frame(width: 130)
55                        .animation(Animation.easeInOut.speed(0.6),
56                                   value: endRadius)
57                }
58            }
59            .padding()
60            .fontWeight(.bold)
61            
62            
63            Spacer()
64        }
65        .padding()
66    }
67}

setting values for start and end radii of Radial Gradient in SwiftUI

changing values for start and end radii of Radial Gradient in SwiftUI

Animate change of center, start and end radii of RadialGradient

This code shows the effect of changine the center point as well as changing the start and end radii.

View

 1struct AnimateCenterRadiiView: View {
 2    @State private var centerPoint = UnitPoint(x: 0.5, y: 0.5)
 3    @State private var startRadius:CGFloat = 0
 4    @State private var endRadius:CGFloat = 100
 5    
 6    let timer = Timer.publish(every: 2,
 7                              on: .main,
 8                              in: .common).autoconnect()
 9    
10    func randomRadii() -> (CGFloat, CGFloat) {
11        let radius1 = CGFloat(Double.random(in: 0...100))
12        let radius2 = CGFloat(Double.random(in: 0...200))
13        
14        return (min(radius1, radius2), max(radius1, radius2))
15    }
16    
17    func randomPoint() -> UnitPoint {
18        return UnitPoint(x: Double.random(in: 0...1),
19                         y: Double.random(in: 0...1))
20    }
21    
22    var body: some View {
23        VStack {
24            Text("Change \nCenter, \nStart & End Radii")
25                .font(.title)
26                .fontWeight(.bold)
27            
28            Rectangle()
29                .fill(
30                    RadialGradient(colors: AppColors.rainbow,
31                                   center: centerPoint,
32                                   startRadius: startRadius,
33                                   endRadius: endRadius)
34                )
35                .animation(Animation.easeInOut.speed(0.2),
36                           value: startRadius)
37                .frame(width: 400, height: 400)
38                .onReceive(timer) { _ in
39                    (startRadius, endRadius) = randomRadii()
40                    centerPoint = randomPoint()
41                }
42            
43            
44            VStack(alignment: .trailing)  {
45                HStack() {
46                    Spacer()
47                    Text("Center: ")
48                        .font(.title2)
49                    Text("(\(centerPoint.x, specifier: "%.2F"), \(centerPoint.y, specifier: "%.2F"))")
50                        .font(.title)
51                        .frame(width: 200)
52                        .animation(Animation.easeInOut.speed(0.6),
53                                   value: centerPoint)
54                }
55                HStack() {
56                    Spacer()
57                    Text("Start Radius: ")
58                        .font(.title2)
59                    Text("\(startRadius, specifier: "%.2F")")
60                        .font(.title)
61                        .frame(width: 200)
62                        .animation(Animation.easeInOut.speed(0.6),
63                                   value: startRadius)
64                }
65                HStack() {
66                    Spacer()
67                    Text("End Radius: ")
68                        .font(.title2)
69                    Text("\(endRadius, specifier: "%.2F")")
70                        .font(.title)
71                        .frame(width: 200)
72                        .animation(Animation.easeInOut.speed(0.6),
73                                   value: endRadius)
74                }
75            }
76            .padding()
77            .fontWeight(.bold)
78            
79            
80            Spacer()
81        }
82        .padding()
83    }
84}

Radial Gradient - animating changine center, start and end radii in SwiftUI

Iterate through colors

I find this view unpleasant to look at, it moves the colors out from the center to the outside by creating a new array of colors with the colors offset by 1.

HypnoticView

 1struct HypnoticView: View {
 2    @State private var colorIndex = 0
 3    @State private var colors = AppColors.rainbow
 4    
 5    let timer = Timer.publish(every: 0.12,
 6                              on: .main,
 7                              in: .common).autoconnect()
 8    func colorList() -> [Color] {
 9        colorIndex += 1
10        return AppColors.rainbow.indices.map  { AppColors.rainbow.wrap(index: (colorIndex - $0)) }
11    }
12    
13    var body: some View {
14        VStack(alignment: .trailing) {
15            
16            Circle()
17                .fill(
18                    RadialGradient(colors: colors,
19                                   center: .center,
20                                   startRadius: 10,
21                                   endRadius: 200)
22                )
23                .animation(Animation.easeInOut.speed(0.12),
24                           value: colorIndex)
25                .frame(width: 400, height: 400)
26                .onReceive(timer) { _ in
27                    colors = colorList()
28                }
29        }
30    }
31}
32
33
34extension Array {
35    func wrap(index: Int) -> Element {
36        let wrappedIndex = index >= 0 ? index % self.count : self.count + index % self.count
37        return self[wrappedIndex]
38    }
39}

Radial Gradient iterating through colors in SwiftUI

Create rainbow with RadialGradient

Finally, RadialGradient can be used to show a rainbow. It requires the array of colors to begin and end with a clear color as well as setting the center point of the RadialGradient outside the frame.

RainbowView

 1struct RainbowView: View {
 2    var body: some View {
 3        VStack(spacing: 100) {
 4            RoundedRectangle(cornerRadius: 20)
 5                .fill(
 6                    RadialGradient(colors: AppColors.rainbowClear.reversed(),
 7                                   center: .bottom,
 8                                   startRadius: 150,
 9                                   endRadius: 200)
10                )
11                .frame(width: 400, height: 200)
12
13
14            RoundedRectangle(cornerRadius: 20)
15                .fill(
16                    RadialGradient(colors: AppColors.rainbowClear.reversed(),
17                                   center: UnitPoint(x: 0.5, y: 1.6),
18                                   startRadius: 150,
19                                   endRadius: 300)
20                )
21                .frame(width: 400, height: 200)
22        }
23    }
24}

Creating a rainbow with Radial Gradient in SwiftUI

Conclusion

RadialGradient is used to transition from one color to another, optionally through a range of colors in a circular pattern radiating outwards from a center point. This article explored the effect of setting different center points as well as specifying a range of start and end radii for the gradients. RadialGradient can be used to create visually compelling effects in SwiftUI views, especially when used in circular shapes or combined with other colors.

The source code for RadialGradientApp is available on GitHub.

AngularGradient in SwiftUI

Eric Callanan — Sunday, 18 Jun 2023

AngularGradient in SwiftUI is used to create a color gradient of two or more colors where the colors radiate around a center point. The AngularGradient object is initialized with an array of colors that are shown in order around a center point. SwiftUI automatically interpolates between the colors as it goes around the circle.

AngularGradient can be adjusted by changing its center and the startAngle and endAngle parameters to create different effects.

Related articles on color gradients in SwiftUI:

LinearGradient in SwiftUI

AngularGradient in SwiftUI

RadialGradient in SwiftUI

Animate background with color gradient in SwiftUI

Simple Angular Gradient

We'll reuse the arrays of colors defined in LinearGradient in SwiftUI. The view shows AngularGradient with two colors and with seven colors, specifying the center point of the gradient as the center of the view. The initial color starts at 3 o clock and moves in clockwise direction to complete 360 degrees.

AppColors

 1struct AppColors {
 2    static let oneColor = [Color(hue: 0.01, saturation: 0.2, brightness: 0.9),
 3                           Color(hue: 0.01, saturation: 1.0, brightness: 0.9)]
 4
 5    static let twoColors = [Color.blue, .yellow]
 6
 7    static let rainbow = [
 8        Color.red,
 9        .orange,
10        .yellow,
11        .green,
12        .blue,
13        Color(hue: 0.773, saturation: 1.0, brightness: 0.51),
14        Color(hue: 0.771, saturation: 1.0, brightness: 1.00)
15    ]
16}

StartAngularGradientView

 1struct StartAngularGradientView: View {
 2    var body: some View {
 3        VStack {
 4            Text("AngularGradient")
 5                .font(.largeTitle)
 6                .fontWeight(.bold)
 7            Divider()
 8            
 9            VStack(spacing: 0) {
10                Text("Two colors")
11                    .font(.title)
12                    .fontWeight(.bold)
13                
14                RoundedRectangle(cornerRadius: 20)
15                    .fill(
16                        AngularGradient(colors: AppColors.twoColors,
17                                        center: .center)
18                    )
19                    .frame(width: 300, height: 300)
20            }
21            Divider()
22
23            VStack(spacing: 0) {
24                Text("Seven colors")
25                    .font(.title)
26                    .fontWeight(.bold)
27                
28                RoundedRectangle(cornerRadius: 20)
29                    .fill(
30                        AngularGradient(colors: AppColors.rainbow,
31                                        center: .center)
32                    )
33                    .frame(width: 300, height: 300)
34            }
35            
36            Spacer()
37        }
38    }
39}

Simple Angular Gradient specifying the colors and the center in SwiftUI

Standard Center Options

An array of colors and a center point are required to initialise an AngularGradient. This code displays how the seven colors are shown using the different standard center point options.

AngularGradientView

 1struct AngularGradientView: View {
 2    var center: UnitPointType
 3
 4    var body: some View {
 5        HStack {
 6            VStack {
 7                Text("\(center.rawValue)").font(.title2)
 8            }
 9            RoundedRectangle(cornerRadius: 20)
10                .fill(
11                    AngularGradient(colors: AppColors.rainbow,
12                                    center: center.unitPoint)
13                )
14                .frame(width: 100, height: 100)
15        }
16    }
17}

CenterOptionsView

 1struct CenterOptionsView: View {
 2    var body: some View {
 3        ScrollView {
 4            VStack {
 5                Text("All Center Options")
 6                    .font(.largeTitle)
 7                    .fontWeight(.bold)
 8                Divider()
 9                
10                VStack(alignment: .trailing) {
11                    ForEach(UnitPointType.allCases, id: \.self) { endinging in
12                        AngularGradientView(center: endinging)
13                    }
14                }
15            }
16        }
17    }
18}

Standard center options for Angular Gradient in SwiftUI

Four Corners

It can be seen in the previous examples that some of the colors are not displayed when a center point is set at one of the edges of the view. This code shows that setting the center as the bottomTrailing the top right corner of the full color gradient is shown - if the center had been chosen. A full 360 degree circle of color gradient is generated around the center point using the specified colors when there is no start or end angle specified - even if some of these colors are not visible in the view because of the position of the center point.

FourCornersView

 1struct FourCornersView: View {
 2    var body: some View {
 3        VStack {
 4            Text("Four Corners")
 5                .font(.largeTitle)
 6                .fontWeight(.bold)
 7            
 8            Rectangle()
 9                .fill(
10                    AngularGradient(colors: AppColors.rainbow,
11                                    center: .center)
12                )
13                .frame(width: 300, height: 300)
14
15            VStack(spacing: 40) {
16                HStack(spacing: 40) {
17                    Rectangle()
18                        .fill(
19                            AngularGradient(colors: AppColors.rainbow,
20                                            center: .bottomTrailing)
21                        )
22                        .frame(width: 150, height: 150)
23                    Rectangle()
24                        .fill(
25                            AngularGradient(colors: AppColors.rainbow,
26                                            center: .bottomLeading)
27                        )
28                        .frame(width: 150, height: 150)
29                }
30                HStack(spacing: 40) {
31                    Rectangle()
32                        .fill(
33                            AngularGradient(colors: AppColors.rainbow,
34                                            center: .topTrailing)
35                        )
36                        .frame(width: 150, height: 150)
37                    Rectangle()
38                        .fill(
39                            AngularGradient(colors: AppColors.rainbow,
40                                            center: .topLeading)
41                        )
42                        .frame(width: 150, height: 150)
43                }
44            }
45            .padding()
46            Spacer()
47        }    
48    }
49}

Selecting a corner as the center on an AngularGradient will exclude some colors from the view

Animate movement of center point

The effect of changing the center point of the AngularGradient is illustrated by animating through the standard UnitPoints. This illustrates how the gradient changes with the setting of the center point.

enum UnitPointType

 1enum UnitPointType: String, CaseIterable {
 2    case topLeading = "topLeading"
 3    case top = "top"
 4    case topTrailing = "topTrailing"
 5    case leading = "leading"
 6    case center = "center"
 7    case trailing = "trailing"
 8    case bottomLeading = "bottomLeading"
 9    case bottom = "bottom"
10    case bottomTrailing = "bottomTrailing"
11
12    var unitPoint: UnitPoint {
13        switch self {
14        case .topLeading:
15            return UnitPoint.topLeading
16        case .top:
17            return UnitPoint.top
18        case .topTrailing:
19            return UnitPoint.topTrailing
20        case .leading:
21            return UnitPoint.leading
22        case .center:
23            return UnitPoint.center
24        case .trailing:
25            return UnitPoint.trailing
26        case .bottomLeading:
27            return UnitPoint.bottomLeading
28        case .bottom:
29            return UnitPoint.bottom
30        case .bottomTrailing:
31            return UnitPoint.bottomTrailing
32        }
33    }
34}

AnimateCenterView

 1struct AnimateCenterView: View {
 2    @State private var centerPointIndex = 4
 3    
 4    let timer = Timer.publish(every: 2,
 5                              on: .main,
 6                              in: .common).autoconnect()
 7    
 8    var body: some View {
 9        VStack {
10            Text("Move center")
11                .font(.largeTitle)
12                .fontWeight(.bold)
13            
14            Rectangle()
15                .fill(
16                    AngularGradient(colors: AppColors.rainbow,
17                                    center: UnitPointType.allCases[centerPointIndex].unitPoint)
18                )
19                .animation(Animation.easeInOut.speed(0.2),
20                           value: centerPointIndex)
21                .frame(width: 400, height: 400)
22                .onReceive(timer) { input in
23                    centerPointIndex = (centerPointIndex + 1) % UnitPointType.allCases.count
24                }
25            
26            
27            VStack(alignment: .leading)  {
28                HStack() {
29                    Text("center: ")
30                    Text(" \(UnitPointType.allCases[centerPointIndex].rawValue)")
31                        .animation(Animation.easeInOut.speed(0.6),
32                               value: centerPointIndex)
33                    Spacer()
34                }
35                .padding()
36                .font(.title)
37                .fontWeight(.bold)
38            }
39            
40            Spacer()
41        }
42        .padding()
43    }
44}

Animate a change in center of AngularGradient shows how the colors change

Setting Start and End angles in AngularGradient

In addition to specifying the center of an AngularGradient, it is also possible to specify the start and end angles where the gradient will begin and end. When the angle difference between the start and end is less than 360 degrees, the missing area is filled in with the colors at the beginning and end. Note that the center does not have to be one of the standard UnitPoints, but can be specified as any (x,y) coordinate values between 0 and 1.

StartEndAngleView

 1struct StartEndAngleView: View {
 2    var body: some View {
 3        VStack(spacing: 30) {
 4            Text("Start and End Angle")
 5                .font(.title)
 6                .fontWeight(.bold)
 7            
 8            VStack(alignment: .trailing) {
 9                HStack {
10                    Spacer()
11                    VStack(alignment: .trailing)  {
12                        Text("Start Angle =   0")
13                        Text("End Angle = 90")
14                    }
15                    RoundedRectangle(cornerRadius: 20)
16                        .fill(
17                            AngularGradient(colors: AppColors.rainbow,
18                                            center: .center,
19                                            startAngle: Angle(degrees: 0),
20                                            endAngle: Angle(degrees: 90))
21                        )
22                        .frame(width: 200, height: 200)
23                }
24            }
25            
26            VStack(alignment: .trailing) {
27                HStack {
28                    Spacer()
29                    VStack(alignment: .trailing)  {
30                        Text("Start Angle = -90")
31                        Text("End Angle =   90")
32                    }
33                    RoundedRectangle(cornerRadius: 20)
34                        .fill(
35                            AngularGradient(colors: AppColors.rainbow,
36                                            center: .center,
37                                            startAngle: Angle(degrees: -90),
38                                            endAngle: Angle(degrees: 90))
39                        )
40                        .frame(width: 200, height: 200)
41                }
42            }
43            
44            VStack(alignment: .trailing) {
45                HStack {
46                    Spacer()
47                    VStack(alignment: .trailing)  {
48                        Text("Center = (0.2, 0.8)")
49                        Text("Start Angle =          -90")
50                        Text("End Angle =            90")
51                    }
52                    RoundedRectangle(cornerRadius: 20)
53                        .fill(
54                            AngularGradient(colors: AppColors.rainbow,
55                                            center: UnitPoint(x: 0.2, y: 0.8),
56                                            startAngle: Angle(degrees: -90),
57                                            endAngle: Angle(degrees: 90))
58                        )
59                        .frame(width: 200, height: 200)
60                }
61            }
62            Spacer()            
63        }
64        .padding()
65    }
66}

Setting Start and End angles in AngularGradient in SwiftUI

Animate Start and End angles in AngularGradient

The effect of changing the startAngle and endAngle of the AngularGradient is illustrated by animating through random values for the angles. This illustrates how the gradient changes with the setting of the angles around a fixed center point.

AnimateAnglesView

 1struct AnimateAnglesView: View {
 2    @State private var startAngle = Angle(degrees: 0)
 3    @State private var endAngle = Angle(degrees: 90)
 4    
 5    let timer = Timer.publish(every: 2,
 6                              on: .main,
 7                              in: .common).autoconnect()
 8    
 9    func randomAngles() -> (Angle, Angle) {
10        let angle1 = Angle(degrees: Double.random(in: 0...360))
11        let angle2 = Angle(degrees: Double.random(in: 0...360))
12        
13        return (min(angle1, angle2), max(angle1, angle2))
14    }
15    
16    var body: some View {
17        VStack {
18            Text("Move Angles")
19                .font(.largeTitle)
20                .fontWeight(.bold)
21            
22            Rectangle()
23                .fill(
24                    AngularGradient(colors: AppColors.rainbow,
25                                    center: .center,
26                                    startAngle: startAngle,
27                                    endAngle: endAngle)
28                )
29                .animation(Animation.easeInOut.speed(0.2),
30                           value: startAngle)
31                .frame(width: 400, height: 400)
32                .onReceive(timer) { _ in
33                    (startAngle, endAngle) = randomAngles()
34                }
35            
36            
37            VStack(alignment: .trailing)  {
38                HStack() {
39                    Spacer()
40                    Text("Start Angle: ")
41                        .font(.title2)
42                    Text("\(startAngle.degrees, specifier: "%.2F")")
43                        .font(.title)
44                        .frame(width: 130)
45                        .animation(Animation.easeInOut.speed(0.6),
46                                   value: startAngle)
47                }
48                HStack() {
49                    Spacer()
50                    Text("End Angle: ")
51                        .font(.title2)
52                    Text("\(endAngle.degrees, specifier: "%.2F")")
53                        .font(.title)
54                        .frame(width: 130)
55                        .animation(Animation.easeInOut.speed(0.6),
56                                   value: endAngle)
57                }
58            }
59            .padding()
60            .fontWeight(.bold)
61            
62            
63            Spacer()
64        }
65        .padding()
66    }
67}

Animate changes in Start and End angles of AngularGradient shows how the colors change

Animate changing of center and angles

This animates changing the center point as well as the start and end angles every 2 seconds - just for fun.

AnimateCenterAnglesView

 1struct AnimateCenterAnglesView: View {
 2    @State private var centerPoint = UnitPoint(x: 0.5, y: 0.5)
 3    @State private var startAngle = Angle(degrees: 0)
 4    @State private var endAngle = Angle(degrees: 90)
 5    
 6    let timer = Timer.publish(every: 2,
 7                              on: .main,
 8                              in: .common).autoconnect()
 9    
10    func randomAngles() -> (Angle, Angle) {
11        let angle1 = Angle(degrees: Double.random(in: 0...360))
12        let angle2 = Angle(degrees: Double.random(in: 0...360))
13        return (min(angle1, angle2), max(angle1, angle2))
14    }
15    
16    func randomPoint() -> UnitPoint {
17        return UnitPoint(x: Double.random(in: 0...1),
18                         y: Double.random(in: 0...1))
19    }
20    
21    var body: some View {
22        VStack {
23            Text("Move Center & Angles")
24                .font(.largeTitle)
25                .fontWeight(.bold)
26            
27            Rectangle()
28                .fill(
29                    AngularGradient(colors: AppColors.rainbow,
30                                    center: centerPoint,
31                                    startAngle: startAngle,
32                                    endAngle: endAngle)
33                )
34                .animation(Animation.easeInOut.speed(0.2),
35                           value: startAngle)
36                .frame(width: 400, height: 400)
37                .onReceive(timer) { _ in
38                    (startAngle, endAngle) = randomAngles()
39                    centerPoint = randomPoint()
40                }
41            
42            
43            VStack(alignment: .trailing)  {
44                HStack() {
45                    Spacer()
46                    Text("Center: ")
47                        .font(.title2)
48                    Text("(\(centerPoint.x, specifier: "%.2F"), \(centerPoint.y, specifier: "%.2F"))")
49                        .font(.title)
50                        .frame(width: 200)
51                        .animation(Animation.easeInOut.speed(0.6),
52                                   value: centerPoint)
53                }
54                HStack() {
55                    Spacer()
56                    Text("Start Angle: ")
57                        .font(.title2)
58                    Text("\(startAngle.degrees, specifier: "%.0F")")
59                        .font(.title)
60                        .frame(width: 200)
61                        .animation(Animation.easeInOut.speed(0.6),
62                                   value: startAngle)
63                }
64                HStack() {
65                    Spacer()
66                    Text("End Angle: ")
67                        .font(.title2)
68                    Text("\(endAngle.degrees, specifier: "%.0F")")
69                        .font(.title)
70                        .frame(width: 200)
71                        .animation(Animation.easeInOut.speed(0.6),
72                                   value: endAngle)
73                }
74            }
75            .padding()
76            .fontWeight(.bold)
77            
78            
79            Spacer()
80        }
81        .padding()
82    }
83}

Animate changes in Center as well as Start and End angles of AngularGradient

AngularGradient on a circular shape

The result of the angular gradient on the square shapes is good to illustrate the result of specifying different center points and angles. Realistically makes more sense on a circular structure, where the area outside the specified angles is trimmed away. Here is a circle where the AngularGradient is used to color the rim of the circle with the specified array of seve colors.

CircleView

 1struct CircleView: View {
 2    @State private var startAngle = Angle(degrees: 0)
 3    @State private var endAngle = Angle(degrees: 90)
 4    
 5    let timer = Timer.publish(every: 2,
 6                              on: .main,
 7                              in: .common).autoconnect()
 8    
 9    func randomAngles() -> (Angle, Angle) {
10        let angle1 = Angle(degrees: Double.random(in: 0...360))
11        let angle2 = Angle(degrees: Double.random(in: 0...360))
12        return (min(angle1, angle2), max(angle1, angle2))
13    }
14    
15    var body: some View {
16        VStack {
17            Text("Circle")
18                .font(.largeTitle)
19                .fontWeight(.bold)
20            Text("Anglular Gradient")
21                .font(.title)
22                .fontWeight(.bold)
23            
24            Spacer()
25                .frame(height: 50)
26            
27            ZStack {
28                Circle()
29                    .strokeBorder(Color(hue: 0, saturation: 0, brightness: 0.85),
30                                  style: StrokeStyle(lineWidth: 60))
31                
32                Circle()
33                    .trim(from: startAngle.degrees/360.0, to: endAngle.degrees/360.0)
34                    .stroke(AngularGradient(colors: AppColors.rainbow,
35                                            center: .center,
36                                            startAngle: startAngle,
37                                            endAngle: endAngle),
38                            style: StrokeStyle(lineWidth: 60,
39                                               lineCap: .round))
40                    .padding(30)
41                    .animation(Animation.easeInOut.speed(0.2),
42                               value: startAngle)
43                    .onReceive(timer) { _ in
44                        (startAngle, endAngle) = randomAngles()
45                    }
46                
47                VStack()  {
48                    HStack() {
49                        Text("Start: ")
50                            .font(.title2)
51                            .frame(width: 60)
52                        Text("\(startAngle.degrees, specifier: "%.0F")")
53                            .font(.title)
54                            .frame(width: 60)
55                            .animation(Animation.easeInOut.speed(0.6),
56                                       value: startAngle)
57                    }
58                    HStack() {
59                        Text("End: ")
60                            .font(.title2)
61                            .frame(width: 60)
62                        Text("\(endAngle.degrees, specifier: "%.0F")")
63                            .font(.title)
64                            .frame(width: 60)
65                            .animation(Animation.easeInOut.speed(0.6),
66                                       value: endAngle)
67                    }
68                }
69                .padding()
70                .fontWeight(.bold)
71            }
72            .frame(width: 380, height: 380)
73            
74            
75            Spacer()
76        }
77        .padding()
78    }
79}

Changes in Start and End angles of AngularGradient on a circle

Animate changes in Start and End angles of AngularGradient on a circle

Conclusion

AngularGradient is used to transition from one color to another, optionally through a range of colors in a radial pattern around a specified center point. This article explored the effect of setting different center points as well as specifying a range of start and end angles for the gradients. AngularGradient can be used to create visually compelling effects in SwiftUI views, especially when used in circular shapes or arcs.

The source code for AngularGradientApp is available on GitHub.