Skip to main content
AngularGradient(props?: {
    colors: Color[];
    center?: UnitPoint;
    startAngle?: number;
    endAngle?: number;
}): Gradient;
​
colors
Color[]
required
An array of colors for the gradient. Colors transition evenly around the sweep.
​
center
UnitPoint
The center point of the gradient. See UnitPoint. Defaults to "center".
​
startAngle
number
The start angle in degrees. Defaults to 0.
​
endAngle
number
The end angle in degrees. Defaults to 360.

​
Support

​
Usage

​
As a standalone view

AngularGradient({
    colors: [Color("red"), Color("yellow"), Color("green"), Color("blue"), Color("purple")]
})
.frame({ width: 200, height: 200 })

​
Full rainbow sweep

AngularGradient({
    colors: [
        Color("red"),
        Color("orange"),
        Color("yellow"),
        Color("green"),
        Color("blue"),
        Color("purple"),
        Color("red")
    ],
    center: "center"
})

​
Partial sweep

AngularGradient({
    colors: [Color("blue"), Color("purple")],
    startAngle: 0,
    endAngle: 180
})

​
Off-center gradient

AngularGradient({
    colors: [Color("orange"), Color("pink")],
    center: "topLeading"
})

​
As a fill

Circle()
    .fill(AngularGradient({
        colors: [Color("red"), Color("blue"), Color("green"), Color("red")],
        center: "center"
    }))
    .frame({ width: 150, height: 150 })

​
As a foreground style

Text("Sweep")
    .font("largeTitle")
    .bold()
    .foregroundStyle(AngularGradient({
        colors: [Color("red"), Color("orange"), Color("yellow")],
        center: "center"
    }))

​
See Also