how to achieve "concave in" glass view look?

Question

Created Apr ’25

Replies 1

Boosts 0

Participants 2

I have been trying to implement this look where a component looks "pushed in" but I could not find any resources regarding this effect. The closest I got was a combination of a RoundedRectangle and .glassBackgroundEffect(), but this makes the view look pushed out, instead of pushed in.

I was wondering if this is achievable in SwiftUI level, or even in UIKit level.

Screenshot 2025-04-11 at 5.20.35 PM.png

Boost

Answer 1

ssmith_c OP

Apr ’25

does this work for you - a stroke with a gradient?

 struct ContentView: View {
    var body: some View {
        
        let backgroundColor = Color(hue: 0.0, saturation: 0.0, brightness: 0.44)
        let foregroundColor = Color(hue: 0.0, saturation: 0.0, brightness: 0.33)
        let rimTop = Color(hue: 0.0, saturation: 0.0, brightness: 0.26)
        let rimBottom = Color(hue: 0.0, saturation: 0.0, brightness: 0.5)
        
        let gradient = LinearGradient(stops: [
            Gradient.Stop(color: rimTop, location: 0.0),
            Gradient.Stop(color: rimTop, location: 0.40),
            Gradient.Stop(color: rimBottom, location: 0.6 ),
            Gradient.Stop(color: rimBottom, location: 1.0 ) ],
                                      startPoint: .top,
                                      endPoint: .bottom)
        
        ZStack {
            RoundedRectangle(cornerRadius: 40)
                .fill(backgroundColor)
                .frame(width:400, height: 300)
            
            Rectangle()
                .fill(.clear)
                .frame(width: 300, height: 50)
                .overlay {
                    RoundedRectangle(
                        cornerRadius: 20, style: .circular)
                    .fill(foregroundColor)
                    .stroke(gradient, lineWidth: 2)
                }
        }
    }
}

Screenshot 2025-04-12 at 11.54.16 AM.png

0

	struct ContentView: View {
	var body: some View {

	let backgroundColor = Color(hue: 0.0, saturation: 0.0, brightness: 0.44)
	let foregroundColor = Color(hue: 0.0, saturation: 0.0, brightness: 0.33)
	let rimTop = Color(hue: 0.0, saturation: 0.0, brightness: 0.26)
	let rimBottom = Color(hue: 0.0, saturation: 0.0, brightness: 0.5)

	let gradient = LinearGradient(stops: [
	Gradient.Stop(color: rimTop, location: 0.0),
	Gradient.Stop(color: rimTop, location: 0.40),
	Gradient.Stop(color: rimBottom, location: 0.6 ),
	Gradient.Stop(color: rimBottom, location: 1.0 ) ],
	startPoint: .top,
	endPoint: .bottom)

	ZStack {
	RoundedRectangle(cornerRadius: 40)
	.fill(backgroundColor)
	.frame(width:400, height: 300)

	Rectangle()
	.fill(.clear)
	.frame(width: 300, height: 50)
	.overlay {
	RoundedRectangle(
	cornerRadius: 20, style: .circular)
	.fill(foregroundColor)
	.stroke(gradient, lineWidth: 2)
	}
	}
	}
	}