Skip to main content
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.

​
See Also