## 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:

1. endAngle - startAngle = 2π
2. endAngle - startAngle > 2π
3. 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()
.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()
.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()
.frame(width:200, height:200)
Rectangle()
.frame(width:200, height:200)
}
}
}
`````` 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.