SwiftUI How to Fade an Image out from the bottom Edge

Question

Basically what Im trying to achieve is this:

To fade an image out from the top to bottom. I tried to do it with overlays but it simply does not look good

Answer 1

Here is a working view to fade an image out from the top to the bottom. Lmk if it works!

Source Code

struct ContentView: View {
    var body: some View {
        VStack {
            Image("Explore")//Your Image
                .resizable()
        }
        //We can use the LinearGradient in the mask modifier to fade it top to bottom
        .mask(LinearGradient(gradient: Gradient(stops: [
            .init(color: .black, location: 0),
            .init(color: .clear, location: 1),
            .init(color: .black, location: 1),
            .init(color: .clear, location: 1)
        ]), startPoint: .top, endPoint: .bottom))
        .padding()
        .frame(width: 400, height: 400)
    }
}

Preview