SwiftUI Background Color
This is a user-friendly guide designed to provide ways to change backgrounds for views.
Color Backgrounds
To add a gradient background to your view. This is what you need to do.
Background Modifier
Change background by simply adding .background modifier to your view.
VStack
{
// my content here
}
.background(.black)
Background With ZStack
Create a ZStack and inside place the background gradient color you desire.
ZStack(alignment: .center, content: {
.black // background color here
// my content here
})
Background With Fill
For rounded rectangle view background modifier does not work instead you would need to use .fill modifier to set its inner background color. And you can put your content below it and use ZStack to overlay content.
ZStack{
RoundedRectangle(cornerRadius: 75)
.fill(
.red
)
// my content here
}
Gradient Backgrounds
Here are gradients that you may wish to incorporate in your app background designs. You can just place them in place of the color in the above code snipets.
// 1
LinearGradient(colors: [.indigo, .cyan],
startPoint: .leading,
endPoint: .trailing)
// 2
LinearGradient(colors: [.purple, .pink],
startPoint: .leading,
endPoint: .trailing)
// 3
LinearGradient(colors: [.blue, .indigo],
startPoint: .bottomLeading,
endPoint: .center)
// 4
LinearGradient(colors: [.green, .yellow],
startPoint: .bottomLeading,
endPoint: .trailing)
// 5
LinearGradient(colors: [.red, .yellow],
startPoint: .bottomLeading,
endPoint: .trailing)
// 6
LinearGradient(colors: [.black, .blue],
startPoint: .bottomLeading,
endPoint: .trailing)
Will add more soon!
Custom SwiftUI Gradient
Create your custom gradient if you like to create something other than the above-provided list of SwiftUI gradients.
Linear Gradient
Let’s begin by creating a linear gradient.
Below we create an orange-to-yellow, top-to-bottom linear gradient. It starts at the top and transitions to the middle.
More than half of the gradient color will be reddish as red is in the center and extends to the bottom.
LinearGradient(colors: [.orange, .red],
startPoint: .top,
endPoint: .center)
Here is how this gradient appears on a VisionOS Simulator. Similarly, you can do it for iOS.
You can choose one from the following options as parameter values for the startpoint and the endpoint:
.bottomLeading
.top
.topLeading
.bottomTrailing
.bottom
.topTrailing
.center
.trailing
.leading
Angular Gradient
Similarly for angular gradient we have the following parameter values as the center:
.bottomLeading
.top
.topLeading
.bottomTrailing
.bottom
.topTrailing
.center
.trailing
.leading
A top trailing angular gradient example is below using the colors blue, purple, cyan, teal, green, orange and pink to create a rainbow like effect:
AngularGradient(colors: [Color.blue, .purple, .cyan, .teal, .green, .orange, .pink, .red],
center: .topTrailing)
Radial Gradient
The only useful radial gradient I was able to produce was at the end radius of 600 and the start radius at zero with colors that are shades of each other.
RadialGradient(gradient: Gradient(colors: [
Color.blue,
Color.indigo
]
),
center: .center, startRadius: 0, endRadius: 600)
This indigo-to-blue radial gradient seemed to serve the purpose of this guide. You can try other radii and play around with more colors. To create your unique gradient effects.
I hope you enjoyed the tutorial so far.
Stay tuned for further interesting VisionOS and SwiftUI tutorials.
Also if you have other / more topic ideas you need me to cover, please share them in the comments.
Thank you for following along with this article! I have some exciting news to share. 🎉
I’ve just launched my new YouTube channel, and my first video is all about getting started with iOS and macOS development using the Swift language in Urdu | Hindi.
If you’re curious about broadening your development skills and diving into the Apple ecosystem, this video is the perfect starting point.
👉 Watch the Video Now
By subscribing to my channel, you’ll get access to:
- Detailed tutorials and guides.
- Comparisons and best practices between Android and iOS development.
- Hands-on projects and coding challenges.
Join me on this exciting journey of cross-platform development. Let’s master Swift together and create amazing apps for iOS and macOS!
🔔 Don’t forget to like, share, and subscribe for more awesome content!
Happy Coding! 🧑💻💡