SwiftUI Background Color

How to change the background color in SwiftUI?

Generated by Bing Image Creator

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)

Captured From Apple VisionOS Simulator

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)

Captured From Apple VisionOS Simulator

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)

Captured From Apple VisionOS Simulator

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! 🧑‍💻💡