0

So currently I have a navigation bar that I'm trying to fade blueish grey (top) to transparent (bottom). The nav bar is fixed so my intention is that it would blend in with the background when I scroll down instead of a solid bluesh grey line. I browsed many threads about this and people seem to suggest the linear-gradient function; however, it gives me a weird output. This is my navbar css:

.navbar { 
    background: linear-gradient(#e5ecf5, rgba(0,0,0,0));
}

Here is a picture of the example output (ignore the weird formating): screenshot

Notice how the gradient turns darker than the actual greyish blue color. It can't be the color #e5ecf5 because that's the color I used as the body background. I also tried rgb format for the hex value to no avail.

edit: Here is a chunk of my code on codepen: https://codepen.io/GMTChan/pen/BdVyjQ

Jesus Mesus
  • 13
  • 1
  • 4
  • post the rest of your code so that we have a [mcve]. The code you posted does not cause the gradient to be darker than `#e5ecf5` https://codepen.io/mcoker/pen/qXKBeg – Michael Coker Aug 23 '17 at 00:12
  • I see, here is the codepen: https://codepen.io/GMTChan/pen/BdVyjQ – Jesus Mesus Aug 23 '17 at 00:28
  • Your codepen doesn't reproduce the layout or problem in your screenshot... – Michael Coker Aug 23 '17 at 00:32
  • Yes, for some reason the formating is off (navbar isn't fixed to the top when I scroll, text looks off, etc); however, there is still the darkening in the middle of the navbar instead of blending with the background edit: as a clarification- the "blueish grey" i'm refering to and want to reproduce is the light blue color on the very top; however it turns darker as the gradient goes up, – Jesus Mesus Aug 23 '17 at 00:36
  • where? I don't see it. chrome on the left, firefox on the right http://i.imgur.com/KIcQiVA.png – Michael Coker Aug 23 '17 at 00:38
  • Okay I just tried it on Chrome and it worked. Thanks. For some reason this only happens on Safari (Mac OS X). Is there any way to fix this...? – Jesus Mesus Aug 23 '17 at 00:41

0 Answers0