Skip to main content
EllipticalGradient(props?: { colors: Color[]; center?: UnitPoint; startRadius?: number; endRadius?: number }): Gradient;

Parameters

props
{ colors: Color[]; center?: UnitPoint; startRadius?: number; endRadius?: number }
Elliptical gradient configuration.

Support

Usage

Basic elliptical gradient

EllipticalGradient({
    colors: [Color("purple"), Color("pink")]
})

Gradient with custom center

EllipticalGradient({
    colors: [Color("cyan"), Color("blue"), Color("navy")],
    center: "bottomLeading"
})

Gradient with custom radius

EllipticalGradient({
    colors: [Color("gold"), Color("orange")],
    startRadius: 10,
    endRadius: 150
})

Soft vignette effect

EllipticalGradient({
    colors: [Color("transparent"), Color("black").opacity(0.6)],
    center: "center",
    startRadius: 50,
    endRadius: 300
})