Adding Vibrant Colors to Your iOS App with Gradient in SwiftUI

Gradient colors are a great way to add more life and energy to your iOS app. With SwiftUI, creating gradient colors is very easy, and there are several different types of gradients available to choose from. By using a gradient, you can add depth and dimension to your app's design, making it more engaging and visually appealing.

In this tutorial, we'll explore the different types of gradients available in SwiftUI, and show you how to use them in your app. We'll cover how to create a linear gradient, a radial gradient, and an angular gradient, and we'll also show you how to use these gradients with different shapes, such as rectangles and circles.

We have 3 types of Gradient effects: 

• LinearGradient,
• RadialGradient,
• AngularGradient.

Code:

import SwiftUI
struct ContentView: View {
    var body: some View {
        let color0 = Color(red: 238/255, green: 130/255, blue: 238/255);
        let color1 = Color(red: 0/255, green: 0/255, blue: 255/255);
        let gradient = Gradient(colors: [color0, color1]);
                   VStack {

                          // Linear gradient color
                          Rectangle()
                           .fill(LinearGradient(
                                     gradient: gradient,
                                     startPoint: .init(x: 0.00, y: 0.50),
                                     endPoint: .init(x: 1.00, y: 0.50)
                                   ))
                              .frame(width: 150, height: 70)
                          Text("Linear color")
                              .foregroundColor(.black)
 
                          // Radial gradient color
                          Rectangle()
                           .fill(RadialGradient(
                                    gradient: gradient,
                                    center: .center,
                                    startRadius: 1,
                                    endRadius: 100
                                  ))
                              .frame(width: 150, height: 70)
                          Text("Radial Gradient")
                              .foregroundColor(.black)

                          // Angular gradient color 
                          Rectangle()
                           .fill(AngularGradient(
                                   gradient: gradient,
                                   center: .center,
                                   angle: .degrees(0)
                                 ))
                           .frame(width: 150, height: 70)
                          Text("Angular Gradient")
                           .fontWeight(.semibold)
                           .foregroundColor(.black)
                      }
 
    }
}
 
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

..

Above code snippet that demonstrates how to use gradient colors in SwiftUI.

The code creates a VStack that contains three rectangles, each with a different type of gradient fill. The first rectangle uses a linear gradient fill, while the second uses a radial gradient fill, and the third uses an angular gradient fill.

The linear gradient fill is created by defining two colors, then creating a Gradient object with those colors and a specified startPoint and endPoint. The Radial and Angular gradients are similarly created, using the RadialGradient and AngularGradient functions respectively.

Each rectangle has a specified width and height, and is filled with the corresponding gradient using the .fill() modifier.

Finally, there are three Text views that describe each gradient fill type, and the whole VStack is returned as the body of the ContentView struct.

Overall, the code demonstrates how easy it is to create and use gradient colors in SwiftUI to make iOS apps more colorful and vibrant.

..

Online Gradient Generator | Tips and Tricks 

The gradient is a combination of two or more colors where transitions between colors are smooth. This gradient is useful for background, banners, and buttons. 

Create gradient code in CSS, RGBA, HEX, Canvas, SVG, SwiftUI, and Android XML format. In addition, you can also generate gradient images and download them. 

https://angrytools.com/gradient/

Gradient generator video : https://youtu.be/EkyTBLVu73w

..

Get more gradient handpicked color from

https://uigradients.com/#CosmicFusion