How to make bootstrap Navbar background have a transparent fade into the webpage

Question

I'm using JS BootStrap for making my NavBar and I was wondering if there was any styling techniques to have my fixed NavBar at the top of my website have a background of color that evenly fades from cyan towards the top of the NavBar to almost white at the bottom of the NavBar, so that it nicely flows into the whitish gray in the rest of my webpage.

Thanks for any help or advice.

Answer 1

Try this:

.navbar {
    background: linear-gradient(to bottom, cyan 0%, rgba(0,0,0,0) 100%);
}

NOTE : You will need to remove the border and background color on the navbar. Also, you'll need to add all the cross-browser support for that gradient. Here's a useful gradient generator: http://www.colorzilla.com/gradient-editor/