CSS 3 gradients distortion for diagonal effect

Question

I am trying to use css3 to create a gradient which runs diagonal at a particular percentage but it seems that sharp look is getting distorted. Perhaps i am missing something here, any ideas or suggestions welcome.

Associated fiddle:

http://jsfiddle.net/abhinandan/ckaobdpv/

and CSS3 code used:

.header {
    position: relative;
    font-weight: 200;
    padding-top: 50px;
    color: #ffffff;
    text-shadow: 0 1px rgba(0,0,0,0.6);
    height: 9em;
    background:-webkit-linear-gradient(30deg, rgb(72, 208, 231) 30%,#f6f6f6 30%, #222 100%);
    opacity: 0.9;
}

UPDATE: Seems like issue is seen in certain environments for example Chrome on Mac, Opera on Windows

Answer 1

You got the distortion between rgb(72, 208, 231) and #f6f6f6 because you used the same percentages to fade from the first color to the second one.

So, what you have to do is to increase the percentage for the second color:

.header {
   position: relative;
   font-weight: 200;
   padding-top: 50px;
   color: #ffffff;
   text-shadow: 0 1px rgba(0,0,0,0.6);
   height: 9em;
   background:-webkit-linear-gradient(30deg, rgb(72, 208, 231) 30%,#f6f6f6 50%, #222 100%);
   opacity: 0.9;
}

The result:

Demo

Note that, I saw that distortion in Chrome for Windows. Also, make sure that you're using prefixes for cross-browser compatibility.