Skip to main content
LinearGradient(props?: {
    colors?: Color[];
    startPoint?: UnitPoint;
    endPoint?: UnitPoint;
}): Gradient;
​
colors
Color[]
An array of colors for the gradient. Colors transition evenly between them.
​
startPoint
UnitPoint
The starting point of the gradient line. See UnitPoint. Defaults to "top".
​
endPoint
UnitPoint
The ending point of the gradient line. See UnitPoint. Defaults to "bottom".

​
Support

​
Usage

​
As a standalone view

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

​
Top-to-bottom gradient

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

​
Diagonal gradient

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

​
Horizontal gradient

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

​
As a fill

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

​
As a foreground style

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

​
As a background

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

​
See Also