Можно ли сделать так, чтобы нижний градиент выглядел более «блочным», чтобы вместо постепенного переключения с зеленого на красный это происходило в пошаговом режиме, как показано на рисунке ниже?

Желаемый эффект:

В настоящее время:

#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>

В идеале я бы мог установить переменную, чтобы я мог выбирать, из каких блоков будет состоять градиент. Кто-нибудь может помочь?