Swiftui - Add blur linear gradient

Question

I would like to add a white text on the top of an image. My strategy will be to add a gradient that will be blurred at the text zone (please check the attached picture)

Anyone got an idea how to do this?

Answer 1

How's this?

For the blur effect, just use the .blur() modifier - no need for a separate image that's blurred.

struct ContentView: View {
    
    let gradient = LinearGradient(
        gradient: Gradient(stops: [
            .init(color: .purple, location: 0),
            .init(color: .clear, location: 0.4)
        ]),
        startPoint: .bottom,
        endPoint: .top
    )
    
    var body: some View {
        Image("Background")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .overlay(
                ZStack(alignment: .bottom) {
                    Image("Background")
                        .resizable()
                        .blur(radius: 20) /// blur the image
                        .padding(-20) /// expand the blur a bit to cover the edges
                        .clipped() /// prevent blur overflow
                        .mask(gradient) /// mask the blurred image using the gradient's alpha values
                    
                    gradient /// also add the gradient as an overlay (this time, the purple will show up)
                    
                    HStack {
                        Image("Icon") /// app icon
                            .resizable()
                            .frame(width: 64, height: 64)
                        
                        VStack(alignment: .leading) {
                            Text("Classroom of the Elite")
                                .bold()
                            Text("Horikita best girl")
                                .opacity(0.75)
                        }
                        .frame(maxWidth: .infinity, alignment: .leading) /// allow text to expand horizontally
                        
                        Button { } label: {
                            Text("GET")
                                .bold()
                                .padding(8)
                                .background(Color.gray)
                                .cornerRadius(16)
                        }
                    }
                    .foregroundColor(.white)
                    .padding(20)
                }
            )
    }
}

Answer 2

The following solution may be viable for others as this already has been answered.

You can probably achieve something similar by adding blur as a separate layer by using Apple's Material shape layer like this:

var gradientView: some View {
    Rectangle()
        .fill(.ultraThinMaterial)
        .mask {
            VStack(spacing: 0) {
                LinearGradient(
                    colors: [
                        Color.black.opacity(1),
                        Color.black.opacity(0),
                    ],
                    startPoint: .bottom,
                    endPoint: .top
                )
                Rectangle()
            }
        }
        .frame(height: 90)
}

Initial source: https://www.reddit.com/r/SwiftUI/comments/o8d8ju/comment/h36etgo/?utm_source=reddit&utm_medium=web2x&context=3