-webkit-linear-gradient causes banding in Chrome/Safari

Question

The title prettymuch says it all. The first picture below is a screenshot when the whole page is about 8000 pixels tall, taken in the latest version of Chrome:

Answer 1

instead of using background-image, try using this(background) -

 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#63adf1), color-stop(53%,#ffffff), color-stop(100%,#ffffff)); /* feel free to play with the % values to get what you are looking for */

and also use hex values always. But from an UX prospective it would be better to use as in image(since you are loading an image anyway) and you won't have to worry about cross browser compatibility.