How to achieve this gradient and the translucent text in SwiftUI?

Hello. How to achieve these gradients along with this beautiful translucent text (marked as green) in SwiftUI?

Replies

something like this should get you started. You'd probably want to put any custom colors into an Asset, not hard-code them like this. All the colors I made here are transparent, so my white background shows through.

I found many relevant samples quite quickly by searching the Internet for "SwiftUI gradient" and "SwiftUI custom color" and "SwiftUI filled rectangle". Did you do the same? If you didn't, you really should have...

extension Color {
    static let pink = Color(red: 0.8, green: 0.0, blue: 0.0, opacity: 0.3)
    static let reddish = Color(red: 1.0, green: 0.0, blue: 0.0, opacity: 0.5)
    static let darkishRed = Color(red: 1.0, green: 0.0, blue: 0.0, opacity: 0.3)
}
let gradient = LinearGradient(gradient: Gradient(colors: [.pink, .reddish]), startPoint: .top, endPoint: .bottom)
struct ContentView: View {
    var body: some View {
        ZStack {
            
            RoundedRectangle(cornerRadius: 10)
            .fill(gradient)
            .frame(width: 200, height: 200)
            Text("hello world")
                .font(.largeTitle)
                .foregroundStyle(Color.darkishRed    )
            }
    }
}

  • Well, thank you. I did search the Internet, and the documentation, however I didn’t really get the effect I was expecting. The gradient still looked a little bit off. I don’t know, maybe it’s the color selection.

Add a Comment