SwiftUI offers us three types of gradients to work with, and like colours they are additionally views that can be drawn in our UI.

Gradients are made up of countless components:

An array of colorations to show
Size and course information
The type of gradient to use
For example, a linear gradient goes in one direction, so we grant it with a begin and stop factor like this:

LinearGradient(gradient: Gradient(colors: [.white, .black]), startPoint: .top, endPoint: .bottom)

The internal Gradient kind used there can additionally be supplied with gradient stops, which let you specify each a colour and how some distance alongside the gradient the shade need to be used.

In contrast, radial gradients pass outward in a circle shape, so rather of specifying a path we specify a begin and give up radius – how a long way from the middle of the circle the coloration ought to begin and cease changing. For example:

RadialGradient(gradient: Gradient(colors: [.blue, .black]), center: .center, startRadius: 20, endRadius: 200)

The remaining gradient kind is referred to as an angular gradient, though you would possibly have heard it referred to someplace else as a conic or conical gradient. This cycles hues round a circle as a substitute than radiating outward, and can create some stunning effects.

For example, this cycles thru a vary of colorings in a single gradient, founded on the center of the gradient:

AngularGradient(gradient: Gradient(colors: [.red, .yellow, .green, .blue, .purple, .red]), center: .center) All of these gradients are capable to stand on my own as views, or be used as phase of a modifier – you can use them as the history for a textual content view, for example.