RadialGradient - Metabind

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
}))

​Support

​Usage

​As a standalone view

​Multi-color gradient

​Off-center gradient

​Custom radius

​As a fill

​As a background (spotlight effect)

​See Also