Structure¶
AngularGradient¶
An angular gradient.¶
Declaration¶
@frozen struct AngularGradient : ShapeStyle, View
Overview¶
An angular gradient is also known as a "conic" gradient. This gradient applies the color function as the angle changes, relative to a center point and defined start and end angles. If endAngle - startAngle > 2π, the gradient only draws the last complete turn. If endAngle - startAngle < 2π, the gradient fills the missing area with the colors defined by gradient locations one and zero, transitioning between the two halfway across the missing area. The gradient maps the unit-space center point into the bounding rectangle of each shape filled with the gradient.
There are 3 main cases where AngularGradient can change:
- endAngle - startAngle = 2π
- endAngle - startAngle > 2π
- endAngle - startAngle < 2π
Note: Angles default to a clockwise rotation, but angles can be a negative value which will rotate the color counter-clockwise.
End Angle - Start Angle = 2π¶
This is the normal case where the start and end angles make a complete circle. Every color will evenly distribute.
struct AngularGradientView: View {
let colors: [Color] = [.yellow, .red,.blue, .purple]
var body: some View {
Rectangle()
.fill(AngularGradient(gradient: Gradient(colors: colors), center: .center))
.frame(width:200, height:200)
}
}

End Angle - Start Angle > 2π¶
This is the case where the total angle is greater than a circle. The gradient will only draw the last complete turn which effectively writes over the first circle portion.
struct AngularGradientView: View {
let colors: [Color] = [.yellow, .red,.blue, .purple]
var body: some View {
VStack {
Rectangle()
.fill(AngularGradient(gradient: Gradient(colors: colors), center: .center))
.frame(width:200, height:200)
Rectangle()
.fill(AngularGradient(gradient: Gradient(colors: colors), center: .center,startAngle: .degrees(0), endAngle: .degrees(360 + 45)))
.frame(width:200, height:200)
}
}
}

End Angle - Start Angle < 2π¶
This is the case where the total angle is less than a circle. The gradient will not make a complete circle, but the missing area between the start and end will be evenly colored with the first and last color of the gradient.
struct AngularGradientView: View {
let colors: [Color] = [.yellow, .red,.blue, .purple]
var body: some View {
VStack {
Rectangle()
.fill(AngularGradient(gradient: Gradient(colors: colors), center: .center))
.frame(width:200, height:200)
Rectangle()
.fill(AngularGradient(gradient: Gradient(colors: colors), center: .center,startAngle: .degrees(0), endAngle: .degrees(180)))
.frame(width:200, height:200)
}
}
}

Availability¶
iOS 13.0+
macOS 10.15+
tvOS 13.0+
watchOS 6.0+
Topics¶
Initializer¶
init(gradient:center:angle:) Creates an angular gradient starting at and angle and going all the way around in a circle.
init(gradient:center:startAngle:endAngle:) Creates an angular gradient from a starting and ending angle.
Type Alias¶
Body The type of view representing the body of this view.