EllipticalGradient

EllipticalGradient(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.

endRadius

number

The ending radius in points.

Support

Usage

As a standalone view

EllipticalGradient({
    colors: [Color("purple"), Color("pink")]
})
.frame({ width: 300, height: 200 })

Multi-color gradient

EllipticalGradient({
    colors: [Color("cyan"), Color("blue"), Color("indigo")]
})

Off-center gradient

EllipticalGradient({
    colors: [Color("yellow"), Color("orange")],
    center: "bottomLeading"
})

Custom radius

EllipticalGradient({
    colors: [Color("white"), Color("black").opacity(0.6)],
    center: "center",
    startRadius: 10,
    endRadius: 200
})

As a fill

RoundedRectangle({ cornerRadius: 20 })
    .fill(EllipticalGradient({
        colors: [Color("purple"), Color("pink"), Color("orange")],
        center: "center"
    }))
    .frame({ width: 300, height: 200 })

Vignette effect

ZStack([
    Image({ url: "https://picsum.photos/400/300" })
        .resizable()
        .scaledToFill(),
    EllipticalGradient({
        colors: [Color("clear"), Color("black").opacity(0.6)],
        center: "center",
        startRadius: 50,
        endRadius: 300
    })
])
.frame({ width: 400, height: 300 })
.clipShape("roundedRectangle", { cornerRadius: 16 })

Notes

The elliptical shape stretches to fill its container. In a non-square frame the gradient appears as an ellipse rather than a circle.
Differs from RadialGradient in that it always fills elliptically rather than circularly.

​Support

​Usage

​As a standalone view

​Multi-color gradient

​Off-center gradient

​Custom radius

​As a fill

​Vignette effect

​Notes

​See Also