Skip to main content
RadialGradient(props?: {
    colors: Color[];
    center?: UnitPoint;
    startRadius?: number;
    endRadius?: number;
}): Gradient;
​
colors
Color[]
required
An array of colors for the gradient. Colors transition from the center outward.
​
center
UnitPoint
The center point of the gradient. See UnitPoint. Defaults to "center".
​
startRadius
number
The starting radius in points. The first color fills from the center to this radius.
​
endRadius
number
The ending radius in points. The last color fills from this radius outward.

​
Support

​
Usage

​
As a standalone view

RadialGradient({
    colors: [Color("white"), Color("black")]
})
.frame({ width: 200, height: 200 })

​
Multi-color gradient

RadialGradient({
    colors: [Color("yellow"), Color("orange"), Color("red")]
})

​
Off-center gradient

RadialGradient({
    colors: [Color("white"), Color("blue")],
    center: "topTrailing"
})

​
Custom radius

RadialGradient({
    colors: [Color("blue"), Color("clear")],
    center: "center",
    startRadius: 0,
    endRadius: 150
})

​
As a fill

Circle()
    .fill(RadialGradient({
        colors: [Color("yellow"), Color("orange"), Color("red")],
        center: "center",
        startRadius: 10,
        endRadius: 80
    }))
    .frame({ width: 160, height: 160 })

​
As a background (spotlight effect)

VStack([
    Text("Spotlight").foregroundStyle(Color("white")).font("title")
])
.frame({ width: 300, height: 200 })
.background(RadialGradient({
    colors: [Color("white").opacity(0.3), Color("black")],
    center: "center",
    startRadius: 0,
    endRadius: 200
}))

​
See Also