Creating gradients in SwiftUI

Gradients can suggest depth or direction that a flat color cannot. Keeping the colors the same makes it easier to compare how each gradient fills space.

LinearGradient

A linear gradient blends colors along a line between two points.

 RoundedRectangle(cornerRadius: 16.0)
	.fill(
		LinearGradient( // Linear gradient
			colors: [Color.red, Color.blue], // Color array from red to blue
			startPoint: .topLeading, // Start at the top left
			endPoint: .bottomTrailing // End at the bottom right
			)
		)
		.frame(width: 300, height: 200)

RadialGradient

A radial gradient blends colors outward from a center, between the specified radii.

 RoundedRectangle(cornerRadius: 16.0)
	.fill(
		RadialGradient( // Radial gradient
			colors: [Color.red, Color.blue], // Color array from red to blue
			center: .center, // Center position
			startRadius: 80.0, // Start radius
			endRadius: 160.0) // End radius
            )
		)
		.frame(width: 300, height: 200)

AngularGradient

An angular gradient blends colors around a center as the angle changes.

 RoundedRectangle(cornerRadius: 16.0)
	.fill(
		AngularGradient(
			colors: [Color.red, Color.blue], // Color array from red to blue
			center: .center, // Center position
			angle: .degrees(180) // Rotation angle
			)
		)
		.frame(width: 300, height: 200)