
Gradients are an essential design element that should not be overlooked when designing attractive and appealing user interfaces in SwiftUI. SwiftUI Gradients offer a smooth color transition that can add depth and dimension, and a feeling of elegance to your app. 

SwiftUI has four distinct gradient types: `EllipticalGradient`, `AngularGradient`, `RadialGradient`, and `LinearGradient`. A color gradient represented as an array of color stops, each having a parametric location value.

We'll explore the power of gradients in this tutorial, including how to easily integrate them into the UI design.

<CodeBlockWrapper>
<CH.Scrollycoding>

<TitleBlockWrapper>Gradient</TitleBlockWrapper>

<CH.Preview >

<img src={"/images/tutorials/gradients/LinearGradient.png"} />

</CH.Preview>
<CH.Code>

```swift gradient.swift
import SwiftUI

struct ContentView: View {
    let gradient = Gradient(colors: [.red, .yellow])
    let gradient2 = Gradient(colors: [.red, .orange, .red])
    let gradient3 = Gradient(stops: [.init(color: .red, location: 0),
                                      .init(color: .orange, location: 0.2)])
    var body: some View {
        VStack(spacing: 0) {
            Rectangle()
                .fill(
                    LinearGradient(
                        gradient: gradient,
                        startPoint: .leading,
                        endPoint: .trailing)
                )
            Rectangle()
                .fill(
                    LinearGradient(
                        gradient: gradient2,
                        startPoint: .leading,
                        endPoint: .trailing)
                )
            Rectangle()
                .fill(
                    LinearGradient(
                        gradient: gradient3,
                        startPoint: .leading,
                        endPoint: .trailing)
                )
        }
    }
}
```

</CH.Code>
Gradient is a <CodeElementWrapper>struct</CodeElementWrapper> that contains data for creating different kinds of gradients. It has two different initializer function, with `Stops` and  `Colors`. When we initialize the gradient with `Stops`, we can decide distribution of colors(in a range 0 to 1). On the other hand, `Colors` object helps equally distribution.

---

<TitleBlockWrapper> LinearGradient </TitleBlockWrapper>
<CH.Preview >

<img src={"/images/tutorials/gradients/LinearGradient.png"} />

</CH.Preview>

```swift gradient.swift mark=12:15,19:22,26:29

```

The linear gradient is the simplest gradient. You can set the beginning and ending points and a range of colors. It creates a gradient transition in a straight line between two or more colors. We can provide the positions thanks to <CodeElementWrapper>UnitPoint</CodeElementWrapper> struct (x,y cordinate space). SwiftUI has predefined UnitPoint: <CodeElementWrapper>.zero</CodeElementWrapper>, <CodeElementWrapper>.top</CodeElementWrapper>, <CodeElementWrapper>.bottom</CodeElementWrapper>, <CodeElementWrapper>.leading</CodeElementWrapper>, <CodeElementWrapper>.trailing</CodeElementWrapper>.

---

<TitleBlockWrapper> RadialGradient </TitleBlockWrapper>
<CH.Preview >
<img src={"/images/tutorials/gradients/RadialGradient.png"} />

</CH.Preview>

RadialGradient creates a gradient transition between two or more colors in a <CodeElementWrapper>circular</CodeElementWrapper> pattern. Unlike the LinearGradient, a radial gradient begins by adding color concentrically from the center point and scales to fit within the specified radius. Concept is quite similar, we define start and end radius with center point instead of start and end points. center is <CodeElementWrapper>UnitPoint</CodeElementWrapper>, startRadius and endRadius are <CodeElementWrapper>CGFloat</CodeElementWrapper> objects.

```swift RadialGradient.swift
struct RadialGradient: View {
    let gradient = Gradient(colors: [.red, .yellow])
    
    var body: some View {
        HStack {
            VStack {
                Rectangle()
                    .fill(
                        RadialGradient(gradient: gradient, center: .center, startRadius: 1, endRadius: 99)
                )
                    .frame(width: 250, height: 250)
                Text("radius 1 to 100")
                    .fontWeight(.semibold)
                    .foregroundColor(.black)
            }
            VStack {
                Rectangle()
                    .fill(
                        RadialGradient(gradient: gradient, center: .center, startRadius: 1, endRadius: 99)
                )
                    .frame(width: 250, height: 125)
                Text("radius 1 to 100")
                    .fontWeight(.semibold)
                    .foregroundColor(.black)
            }
            VStack {
                Rectangle()
                    .fill(
                        RadialGradient(gradient: gradient, center: .center, startRadius: 1, endRadius: 5)
                )
                    .frame(width: 200, height: 100)
                Text("radius 1 to 50")
                    .fontWeight(.semibold)
                    .foregroundColor(.black)
            }
        }
    }
}

```

---

<TitleBlockWrapper> AngularGradient </TitleBlockWrapper>
<CH.Preview >

<img src={"/images/tutorials/gradients/AngularGradient.png"} />

</CH.Preview>

An angular gradient is also known as a <CodeElementWrapper>conic</CodeElementWrapper> gradient are the gradients where the color change is based on the angle. It cycling through various colors then returning to the beginning. We can initialize AngularGradient with a few different variables.

```swift AngularGradient.swift
struct AngularGradient: View {
    let gradient = Gradient(colors: [.yellow, .orange, .red, .green, .blue, .mint])
    
    var body: some View {
        HStack {
            VStack {
                Rectangle()
                    .fill(
                        AngularGradient(gradient: gradient, center: .center)
                )
                .frame(width: 200, height: 200)
            }
            VStack {
                Rectangle()
                    .fill(
                        AngularGradient(gradient: gradient, center: .center, angle: .degrees(90))
                )
                .frame(width: 200, height: 200)
            }
            VStack {
                Rectangle()
                    .fill(
                        AngularGradient(gradient: gradient, center: .center, startAngle: .degrees(90), endAngle: .degrees(180))
                )
                .frame(width: 200, height: 200)
            }
        }
    }
}
```
---

<TitleBlockWrapper> EllipticalGradient </TitleBlockWrapper>
<CH.Preview >

<img src={"/images/tutorials/gradients/EllipticalGradient.png"} />

</CH.Preview>

An angular gradient is also known as a “conic” gradient are the gradients where the color change is based on the angle. It cycling through various colors then returning to the beginning. We can initialize AngularGradient with a few different variables.

```swift EllipticalGradient .swift
struct EllipticalGradient: View {
    var body: some View {
        HStack {
            VStack {
                Text("EllipticalGradient")
                RoundedRectangle(cornerRadius: 20)
                    .foregroundStyle(
                        .ellipticalGradient(
                            colors: [.yellow, .red]))
                    .frame(width: 350, height: 150)
            }
            
            VStack {
                Text("EllipticalGradient")
                RoundedRectangle(cornerRadius: 20)
                    .foregroundStyle(
                        .ellipticalGradient(
                            colors: [.yellow, .red]))
                    .frame(width: 100, height: 300)
            }
        }
    }
}
```

---

<TitleBlockWrapper> Using of These Gradients </TitleBlockWrapper>
<CH.Preview >

<img src={"/images/tutorials/gradients/UsageOfGradient.png"} />

</CH.Preview>

All of these gradients  conform to the ShapeStyle and view protocols, therefore you can use them anywhere those two protocols will be expected. We can use them as a <CodeElementWrapper>.background</CodeElementWrapper>, <CodeElementWrapper>.stroke</CodeElementWrapper> and <CodeElementWrapper>.fill</CodeElementWrapper>.


```swift StrokeBorder.swift
struct ContentView: View {
    var body: some View {
        HStack(spacing: 12) {
            Circle()
                .strokeBorder(
                    AngularGradient(gradient: Gradient(colors: [.red, .yellow, .green, .blue, .purple, .red]), center: .center, startAngle: .zero, endAngle: .degrees(360)),
                    lineWidth: 50
                )
                .frame(width: 200, height: 200)
            Text("CodeWithSSG")
                .foregroundStyle(.white)
                .font(.bold(.largeTitle)())
                .background(
                    LinearGradient(gradient: Gradient(colors: [.yellow, .red, .blue]), startPoint: .leading, endPoint: .trailing)
                )
            Circle()
                .fill(
                    RadialGradient(gradient: Gradient(colors: [.orange, .yellow, .red, .blue, .green]), center: .center, startRadius: 50, endRadius: 100)
                )
                .frame(width: 200, height: 200)
        }
    }
}
```

---

</CH.Scrollycoding>
</CodeBlockWrapper>
<div style={{ height: 159 }} />


Blog Tutorials

Gradients in SwiftUI