Multiple Gradients with Shapes

SwiftUI gives us so many ways to add the gradient. A color gradient represented as an array of color stops, each having a parametric location value.

Getting Started

1. Text with Linear Gradient.
2. Text with Gradient and CornerRadius.
3. Text with Gradient, CornerRadius & Shadow.
4. Text with Radial Gradient, CornerRadius & Shadow.
5. Text with Angular Gradient, CornerRadius & Shadow.
6. Text with Angular Gradient, CornerRadius, Shadow & Circle Shape.
7. Text with Angular Gradient, CornerRadius, Shadow & Rectangle Shape.
8. Gradient that masked with the Text.

Let’s start

Text with Linear Gradient

Take a Text and use LinearGradient to give the gradient.

Text with Gradient

Text(“Anmol Maheshwari”)
    .foregroundColor(.white)
    .padding()
    .background(
        LinearGradient(gradient: Gradient(colors: [.red, .blue]), startPoint: .leading, endPoint: .trailing)
)

Text with Gradient and CornerRadius

Add cornerRadius in the above code. So your code and view should look like below.

Text with Gradient & Corner Radius

Text(“Anmol Maheshwari”)
    .foregroundColor(.white)
    .padding()
    .background(
        LinearGradient(gradient: Gradient(colors: [.red, .blue]), startPoint: .leading, endPoint: .trailing)
             .cornerRadius(10.0)
)

Text with Gradient, CornerRadius & Shadow

Add shadow in the above by adding

.shadow(color: .black, radius: 10.0, x: 0, y: 0)

Text with Gradient, CornerRadius & Shadow

Text(“Anmol Maheshwari”)
    .foregroundColor(.white)
    .padding()
    .background(
        LinearGradient(gradient: Gradient(colors: [.red, .blue]), startPoint: .leading, endPoint: .trailing)
             .cornerRadius(10.0)
             .shadow(color: .black, radius: 10.0, x: 0, y: 0)
)

Text with Radial Gradient, CornerRadius & Shadow.

Radial Gradient

Text(“Anmol Maheshwari”)
    .foregroundColor(.white)
    .padding()
    .background(
        RadialGradient(gradient: Gradient(colors: [.red, .blue]), center: .center, startRadius: 10, endRadius: 100)
             .cornerRadius(10.0)
             .shadow(color: .black, radius: 10.0, x: 0, y: 0)
)

Text with Angular Gradient, CornerRadius & Shadow.

Angular Gradient

Text(“Anmol Maheshwari”)
    .foregroundColor(.white)
    .padding()
    .background(
        AngularGradient(gradient: Gradient(colors: [.red, .yellow, .green, .blue, .purple]), center: .center, startAngle: .zero, endAngle: .degrees(360))
             .cornerRadius(10.0)
             .shadow(color: .black, radius: 10.0, x: 0, y: 0)
)

Text with Angular Gradient, CornerRadius, Shadow & Circle Shape

Circle shape

Text(“Anmol Maheshwari”)
    .foregroundColor(.white)
    .padding()
    .background(
        AngularGradient(gradient: Gradient(colors: [.red, .yellow, .green, .blue, .purple]), center: .center, startAngle: .zero, endAngle: .degrees(360))
             .cornerRadius(10.0
             .clipShape(Circle())
             .frame(width: 200, height: 200)
             .shadow(color: .black, radius: 10.0, x: 0, y: 0)
)

Text with Angular Gradient, CornerRadius, Shadow & Rectangle Shape

Rectangle shape

Text(“Anmol Maheshwari”)
    .foregroundColor(.white)
    .padding()
    .background(
        AngularGradient(gradient: Gradient(colors: [.red, .yellow, .green, .blue, .purple]), center: .center, startAngle: .zero, endAngle: .degrees(360))
             .cornerRadius(10.0
             .clipShape(Rectangle())
             .frame(width: 200, height: 200)
             .shadow(color: .black, radius: 10.0, x: 0, y: 0)
)

Gradient that masked with the Text

LinearGradient(gradient: Gradient(colors: [.red, .blue, .green,
     .orange, .purple]), startPoint: .leading, endPoint: .trailing)
     .mask(Text("I love my INDIA.")).font(.largeTitle)
     .frame(width: 250, height: 200, alignment: .center)
)

Linear Gradient

RadialGradient(gradient: Gradient(colors: [.red, .blue, .green,
     .orange, .purple]), center: .center, startRadius: 10,
     endRadius: 200)
     .mask(Text("I love my INDIA.")).font(.largeTitle)
     .frame(width: 250, height: 200, alignment: .center)
)

Radial Gradient

AngularGradient(gradient: Gradient(colors: [.red, .blue, .green,
     .orange, .purple]), center: .center, startAngle: .zero,
     endAngle: .init(degrees: 360))
     .mask(Text("I love my INDIA.")).font(.largeTitle)
     .frame(width: 250, height: 200, alignment: .center)
)

Angular Gradient

I hope you enjoyed reading this post.

If you liked what you read, please leave some claps! and follow me.

Did I get something wrong? Mention it in the comments. I would love to improve.

Thanks

#Gradient #Linear #Radial #Rectangle #Text #Circle #Shape #iOS #XCode #SwiftUI #Developer #Technology #TechnicalAdvancement #Blogger #SwiftUIForum #MobcoderLLC