locked
Visible Banding in CSS gradient

    Question

  • I am observing heaving banding when using CSS to create a gradient. I even used the trick of transitioning to a transparent color that is the same as the background color in hopes to reduce the banding. No dice!

    Can anyone help me? Is it possible to use a CSS gradient w/o banding?

    Here is the CSS code I am using. I am also using a background image. If I eliminate the image, I observe the same banding issues. Thanks!

    {
        background-color: #222222;
        background-image: url(/images/imageLoading.png), -ms-linear-gradient(top, rgba(68,68,68,1) 0%, rgba(34,34,34,0) 100%);
        background-size: 100%;
        background-repeat: no-repeat;
        background-% 20%;
    }

    Tuesday, October 28, 2014 1:44 PM

All replies

  • Checkout all this fixes for different browsers:

      background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
      background: linear-gradient(red, blue); /* Standard syntax */

    Source: http://www.w3schools.com/css/css3_gradients.asp

    • Proposed as answer by Deric Ferreira Tuesday, October 28, 2014 1:50 PM
    • Unproposed as answer by Jaxim Tuesday, October 28, 2014 2:54 PM
    Tuesday, October 28, 2014 1:49 PM
  • This is for winjs apps. I don't have to worry about other browsers. With that said, I have tried the standard syntax and that also did not fix things.
    Tuesday, October 28, 2014 2:57 PM