LinearGradient

LinearGradient(props?: {
    colors?: Color[];
    startPoint?: UnitPoint;
    endPoint?: UnitPoint;
}): Gradient;

LinearGradient({
    colors: [Color("blue"), Color("purple")]
})
.frame({ height: 200 })

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

LinearGradient({
    colors: [Color("blue"), Color("purple")],
    startPoint: "topLeading",
    endPoint: "bottomTrailing"
})

LinearGradient({
    colors: [Color("green"), Color("blue")],
    startPoint: "leading",
    endPoint: "trailing"
})

RoundedRectangle({ cornerRadius: 16 })
    .fill(LinearGradient({
        colors: [Color("blue"), Color("purple")],
        startPoint: "leading",
        endPoint: "trailing"
    }))
    .frame({ height: 56 })

Text("Gradient Text")
    .font("largeTitle")
    .foregroundStyle(LinearGradient({
        colors: [Color("red"), Color("orange")],
        startPoint: "leading",
        endPoint: "trailing"
    }))

VStack([
    Text("Content").foregroundStyle(Color("white"))
])
.padding(24)
.background(LinearGradient({
    colors: [Color("indigo"), Color("purple")],
    startPoint: "top",
    endPoint: "bottom"
}))
.cornerRadius(16)