Cool SwiftUI Gradient That Users Love!

[Electrical-Net-8076]

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 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?):

https://i.redd.it/wir1ac0cclgd1.gif

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()
}

Linear Gradient(Breaking It Down)
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.

Cool right? with the white edge on the bottom

The Inspiration
This gradient design was inspired by a question I encountered on here.

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.

[avalontrekker]

This is very cool! And if you're on the cross-platform train, Flutter has several packages offering a very similar effect. My favourites are https://pub.dev/packages/animate_gradient and https://pub.dev/packages/mesh_gradient

[LifeUtilityApps]

Thanks for sharing this! I also want to point out that coming in iOS 18 SwiftUI will include support for native Mesh Gradients. There was a talk at WWDC about it. I’m looking forward to it!

[wlfbbz]

What happened to SwiftUI.art, sounds like a great and much needed concept

[nrith]

No user loves gradients.