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
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