Gradient from clear to white

user_13185971 0
Viewed 1232

I want to do an navbar like this -> enter image description here

But when I try to do it i have a shadow box and i can't resolve it -> enter image description here.

HStack {
    Spacer()
    FriendsButtonView(index: $index).frame(width: width/5, height: width/5)
    Spacer()
    FloatingButtonView(index: $index, open: $openModal).frame(width: width/5, height: width/5)
    Spacer()
    faqButtonView(index: $index).frame(width: width/5, height: width/5)
    Spacer()
}.frame(width: width, height: height/10)
.background(LinearGradient(gradient: Gradient(colors: [Color.clear, Color.white]), startPoint: .top, endPoint: .bottom))
.clipped()
.offset(y: height/2.225)

Thanks for help.

navbar swiftui gradient
3 Answers

Using help of @Asperi.

ZStack {
    VStack (spacing: 0) {
        Rectangle()
            .fill(LinearGradient(gradient: Gradient(colors: [Color.white.opacity(0.01), Color.white.opacity(1)]), startPoint: .top, endPoint: .bottom))
        Rectangle()
            .fill(Color.white)
    }
    .frame(width: width, height: height/10)

    HStack {
        Spacer()
        MoneyButtonView(index: $index)
            .frame(width: width/5, height: width/5)
        Spacer()
        HomeButtonView(index: $index)
            .frame(width: width/5, height: width/5)
        Spacer()
        PoolButtonView(index: $index)
            .frame(width: width/5, height: width/5)
        Spacer()
    }
}
.offset(y: height/2.225)
.frame(width: width, height: height/10)
user_131859710

Here is a demo of possible solution. Tested with Xcode 11.4 / iOS 13.4

demo

struct DemoGradientHeaderView: View {
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 16)
                .foregroundColor(.white)
                .padding()
                .shadow(radius: 10)
            Text("What is the role of ambassador?").font(.largeTitle)
        }
        .overlay(LinearGradient(gradient: Gradient(colors: [Color.white.opacity(0.01), Color.white]),
            startPoint: .top, endPoint: .bottom))
        .frame(height: 160)
    }
}
user_122990300

Just to reiterate what @Fogmeister said in a comment: The reason why the gradient from Color.clear to Color.white has a gray color, is that Color.clear is the same as Color.black.opacity(0). And even though Color.black.opacity(0) and Color.white.opacity(0) look the same (they're both transparent), the interpolated colors will be different depending on which one you choose.

user_32084920
Related