How to turn a SwiftUI color into a gradient

---

You’re more of a video kind of person? I’ve got you covered! Here’s a video with the same content than this article 🍿

---

Let’s talk about color gradients!

Did you know that SwiftUI has an API that lets you turn a solid Color into a gradient by adding a single line of code?

All you need to do is call the property .gradient on a SwiftUI Color, and that Color will be automatically turned into a nice looking gradient:

Of course, when you work with designers they’ll provide you with color codes to implement exactly the gradient that they want.

But when you’re working alone on your own app, the property .gradient is a nice way to create a visually pleasing gradient without having to worry about color codes.

There’s just one catch to keep in mind: this property is only available starting from iOS 16.

That’s all for this short article, I hope you’ve enjoyed it!

Here’s the code if you want to experiment with it:

import SwiftUI

struct ContentView: View {
    
    let colors: [Color] = [.blue, .red, .green,]
    
    var body: some View {
        VStack {
            ForEach(colors, id: \.self) { color in
                Rectangle().fill(color.gradient)
            }
        }
        .padding()
    }
}