swiftuiswiftui-layout

SwiftUI How to Fade an Image out from the bottom Edge


Basically what Im trying to achieve is this: enter image description here

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


Solution

  • 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

    enter image description here