Ist es möglich, den unteren Farbverlauf "blockiger" zu gestalten, sodass der Wechsel von Grün zu Rot nicht schrittweise erfolgt, sondern in Schritten wie im folgenden Bild?

Gewünschter Effekt:

Zur Zeit

#gradients {
  background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #00FF00), color-stop(0.5, #FFFF00), color-stop(1, #FF0000));
  background-image: -o-linear-gradient(right, #00FF00 0%, #FFFF00 50%, #FF0000 100%);
  background-image: -moz-linear-gradient(right, #00FF00 0%, #FFFF00 50%, #FF0000 100%);
  background-image: -webkit-linear-gradient(right, #00FF00 0%, #FFFF00 50%, #FF0000 100%);
  background-image: -ms-linear-gradient(right, #00FF00 0%, #FFFF00 50%, #FF0000 100%);
  background-image: linear-gradient(to right, #00FF00 0%, #FFFF00 50%, #FF0000 100%);
}

<div id="gradients" style="width:450px; height:20px"></div>

Ideally, ich wäre in der Lage, eine Variable zu setzen, damit ich wählen kann, aus wie vielen Blöcken der Verlauf bestehen würde. Kann jemand helfen