Question

If you look at http://jsfiddle.net/q2cFb/1/, you can see that both #b and #a is not working on Firefox (13.0.1). Why is that? It works on Chrome (with different syntax, but same colors).

Do I need to have some specific colors for gradient to work? Both #a and #c are using two colors, but #a isn’t working.

HTML:

<div id='c'></div>
<div id='b'></div>
<div id='a'></div>

CSS:

#c {
    background-image: -moz-linear-gradient(center bottom , #131315 37%, #272727 75%);
}

#b {
    background-image: -moz-linear-gradient(center bottom , #242424 80%, #1E1E1E 58%, #191919 20%);
}

#a {
    background-image: -moz-linear-gradient(center bottom , #242424 80%, #191919 20%);
}

Answer 1

The problem is that your percentages aren’t in increasing order. See the MDN docs:

Color-stops must be specified in order.