Hey👋

I recently came across a question on Reddit about creating gradients in SwiftUI, and after sharing my solution, I received a lot of positive feedback. It seemed like many of you found it valuable, so I decided to dive deeper and share it here on dev.to for a wider audience.

The Power of Gradients in SwiftUI

Gradients are a powerful tool in any designer's toolkit. They can add depth, dimension, and a touch of elegance to your UI. SwiftUI makes it incredibly easy to create beautiful gradients with just a few lines of code. Today, I'll show you how to create a stunning gradient background using both linear and radial gradients.

Like in this example (SwiftUI gradient with animation pretty cool right ?)

The Example

Let's take a look at a practical example. This example combines a linear gradient with a radial gradient to create a beautiful background effect.

import SwiftUI

struct GradientBackgroundView: View {
    var body: some View {
        ZStack {
            LinearGradient(
                gradient: Gradient(colors: [
                    Color(red: 0.70, green: 0.90, blue: 0.95),  // Approximate color for the top
                    Color(red: 0.60, green: 0.85, blue: 0.75)   // Approximate color for the bottom
                ]),
                startPoint: .top,
                endPoint: .bottom
            )
            .edgesIgnoringSafeArea(.all)

            RadialGradient(
                gradient: Gradient(colors: [
                    Color.white.opacity(0.9), // Transparent white
                    Color.clear               // Fully transparent
                ]),
                center: .bottomLeading,
                startRadius: 5,
                endRadius: 400
            )
            .blendMode(.overlay)
            .edgesIgnoringSafeArea(.all)
        }
    }
}

#Preview {
    GradientBackgroundView()
}

Breaking It Down

Linear Gradient

The first part of our background is a linear gradient. This gradient smoothly transitions from a light blue at the top to a slightly darker greenish-blue at the bottom.

LinearGradient(
    gradient: Gradient(colors: [
        Color(red: 0.70, green: 0.90, blue: 0.95),
        Color(red: 0.60, green: 0.85, blue: 0.75)
    ]),
    startPoint: .top,
    endPoint: .bottom
)
.edgesIgnoringSafeArea(.all)

By specifying the start and end points, we can control the direction of the gradient. The .edgesIgnoringSafeArea(.all) modifier ensures that the gradient covers the entire screen.

Radial Gradient

Next, we add a radial gradient to enhance the effect. This gradient transitions from a transparent white to fully transparent, creating a subtle overlay that adds depth.

RadialGradient(
    gradient: Gradient(colors: [
        Color.white.opacity(0.9),
        Color.clear
    ]),
    center: .bottomLeading,
    startRadius: 5,
    endRadius: 400
)
.blendMode(.overlay)
.edgesIgnoringSafeArea(.all)

By blending the radial gradient with the linear gradient, we achieve a more complex and visually appealing background.

The Inspiration

This gradient design was inspired by a question I encountered on Reddithere.

Final Thoughts

Gradients are a simple yet powerful way to enhance your UI designs. With SwiftUI, creating stunning gradients is straightforward and fun.

If you're looking for more SwiftUI design resources and ready-to-use components, be sure to check out SwiftUI.art. We're dedicated to helping developers speed up their iOS app development with beautiful, pre-made SwiftUI components.

Happy coding!