SwiftUI Forum
Published in

SwiftUI Forum

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

--

--

--

SwiftUI Forum for all developers.

Recommended from Medium

Changing Careers To Become A Software Engineer

How to make progress while studying for coding interviews

Leetcode 125 Valid Palindrome ( C,C++,C#,Java,Javascript,Ruby)

Binary Trees

How to collect metrics from Spring Boot application with micrometer Prometheus and Grafana full…

Detailed Explanation of Guava RateLimiter’s Throttling Mechanism

Builder Pack release !

Some people might take interest. Some may support you in your quest. But at the end of

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anmol Maheshwari

Anmol Maheshwari

iOS Application Developer | IOT | ML | AR | SwiftUI

More from Medium

StaticResource & DynamicResource in Xamarin Forms

Interceptors in Angular — Adding custom headers in all http request.

Setting and Observing Firefly Semantics Slice Entity Store Queries