how many linear gradient colors can you use at a time?

Problem

I'm trying to use 7 gradient colors as my background every time after the 3rd color it doesn't seem to be working? Can someone give me specific details on what is going on. Code is provided below.

body
{
    height: 2500px;
    background: -webkit-linear-gradient(#000000 2%,#FFFFFF 2%,#FFFFFF 30%,#2ecc71 30%,#2ecc71 70%,#3498db 70%,#3498db 30%,#000000 30%);                 /* For Safari */
    background: -o-linear-gradient(#000000 2%,#FFFFFF 2%,#FFFFFF 30%,#2ecc71 30%,#2ecc71 70%,#3498db 70%,#3498db 30%,#000000 30%);                     /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#000000 2%,#FFFFFF 2%,#FFFFFF 30%,#2ecc71 30%,#2ecc71 70%,#3498db 70%,#3498db 30,#000000 30%);                  /* For Firefox 3.6 to 15 */
    background: linear-gradient(#000000 2%,#FFFFFF 2%,#FFFFFF 30%,#2ecc71 30%,#2ecc71 70%,#3498db 70%,#3498db 30%,#000000 30%);                      /* Standard syntax */
}
Problem courtesy of: user2223285

Solution

Please try:

body {
  height: 500px;
  background: linear-gradient(
    #000000 0%,
    #FFFFFF 4%,
    #FFFFFF 15%,
    #2ecc71 26%,
    #2ecc71 52%,
    #3498db 78%,
    #3498db 89%,
    #000000 100%);
}

which is demonstrated in this fiddle. If it meets your needs then you can apply the percentages back to the other lines. I used your numbers and tried to match what I thought you were going for in terms of size.

If you want less fade between colors you can insert the next color with the same percent as the last color. See http://jsfiddle.net/t7yS7/1/ for an example.

@xpy gave me the clue to fix this.

Solution courtesy of: Jason Aller

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.