EducaSwift

SwiftUI makes it simple to add vibrant, visually pleasing gradients to your views, enhancing the look and feel of your app’s user interface. With gradient support, you can create color transitions that range from subtle fades to bold, eye-catching designs. In this article, we’ll explore how to use gradients in SwiftUI, covering the basics of linear, radial, and angular gradients, along with examples of how to apply them effectively.

Types of Gradients in SwiftUI

SwiftUI provides three types of gradients:

• LinearGradient: Creates a gradient that transitions linearly between colors.
• RadialGradient: Produces a circular gradient radiating from a center point.
• AngularGradient: Creates a circular gradient that transitions colors around a central point.

1. LinearGradient

LinearGradient is the most commonly used gradient, creating a smooth transition between two or more colors along a straight line. You can define the start and end points of the gradient to control its direction.

Rectangle()
    .fill(
        LinearGradient(
            gradient: Gradient(colors: [.blue, .purple]),
            startPoint: .topLeading,
            endPoint: .bottomTrailing
        )
    )
    .frame(width: 200, height: 200)

2. RadialGradient

The RadialGradient radiates from a center point, creating a circular or oval gradient effect. This gradient is ideal for backgrounds or creating highlights in certain views.

Circle()
    .fill(
        RadialGradient(
            gradient: Gradient(colors: [.yellow, .orange, .red]),
            center: .center,
            startRadius: 10,
            endRadius: 100
        )
    )
    .frame(width: 200, height: 200)

3. AngularGradient

An AngularGradient creates a circular gradient that transitions colors around a central point, making it well-suited for dials, clocks, and progress indicators.

Circle()
    .fill(
        AngularGradient(
            gradient: Gradient(colors: [.red, .orange, .yellow, .green, .blue, .purple, .red]),
            center: .center
        )
    )
    .frame(width: 200, height: 200)

Applying Gradients to Text

SwiftUI also allows you to apply gradients to text by using the .overlay modifier with a mask. Here’s an example:

Text("SwiftUI Gradients")
    .font(.largeTitle)
    .fontWeight(.bold)
    .foregroundColor(.clear)
    .overlay(
        LinearGradient(
            gradient: Gradient(colors: [.blue, .purple]),
            startPoint: .leading,
            endPoint: .trailing
        )
    )
    .mask(Text("SwiftUI Gradients").font(.largeTitle).fontWeight(.bold))