LinearGradient - Metabind

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)

​Support

​Usage

​As a standalone view

​Top-to-bottom gradient

​Diagonal gradient

​Horizontal gradient

​As a fill

​As a foreground style

​As a background

​See Also