Sections 5: Online Gradient Generator | Gradient in SwiftUI

Gradient colors make iOS apps much more colorful and vibrant. 

SwiftUI gives us a variety of gradient options, all of which can be used in a variety of ways

We have 3 types of Gradient effects: 

• LinearGradient,
• RadialGradient,
• AngularGradient.

Code:

// www.boltuix.com
 
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 {
                          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)
 
                          Rectangle()
                           .fill(RadialGradient(
                                    gradient: gradient,
                                    center: .center,
                                    startRadius: 1,
                                    endRadius: 100
                                  ))
                              .frame(width: 150, height: 70)
                          Text("Radial Gradient")
                              .foregroundColor(.black)
 
                          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()
    }
}

..

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