Blocky gradient effect in CSS3

Question

Is it possible to make the below gradient look more \"blocky\", so that instead of switching from green to red gradually, it\'s done in steps like the below picture?

Answer 1

Some examples using gradients:

.gradient {
  width:450px;
  height:20px;
}
.g-1{
  background-color: #FFFF00;
}
.g-3{
  background-image: linear-gradient(
    to right,
    #00FF00 33%, #FFFF00 33%,
    #FFFF00 66%, #FF0000 66%
  );
}
.g-5{
  background-image: linear-gradient(
    to right,
    #00FF00 20%, #80FF00 20%,
    #80FF00 40%, #FFFF00 40%,
    #FFFF00 60%, #FF8000 60%,
    #FF8000 80%, #FF0000 80%
  );
}
.g-9{
  background-image: linear-gradient(
    to right,
    #00FF00 11%, #40FF00 11%,
    #40FF00 22%, #80FF00 22%,
    #80FF00 33%, #C0FF00 33%,
    #C0FF00 44%, #FFFF00 44%,
    #FFFF00 56%, #FFC000 56%,
    #FFC000 67%, #FF8000 67%,
    #FF8000 78%, #FF4000 78%,
    #FF4000 89%, #FF0000 89%
  );
}
.g-17{
  background-image: linear-gradient(
    to right,
    #00FF00 6%, #20FF00 6%,
    #20FF00 12%, #40FF00 12%,
    #40FF00 18%, #60FF00 18%,
    #60FF00 24%, #80FF00 24%,
    #80FF00 29%, #A0FF00 29%,
    #A0FF00 35%, #C0FF00 35%,
    #C0FF00 41%, #D0FF00 41%,
    #D0FF00 47%, #FFFF00 47%,
    #FFFF00 53%, #FFD000 53%,
    #FFD000 59%, #FFC000 59%,
    #FFC000 65%, #FFA000 65%,
    #FFA000 71%, #FF8000 71%,
    #FF8000 76%, #FF6000 76%,
    #FF6000 82%, #FF4000 82%,
    #FF4000 88%, #FF2000 88%,
    #FF2000 94%, #FF0000 94%
  );
}
.g-inf{
  background-image: linear-gradient(
    to right,
    #00FF00 0%,
    #FFFF00 50%,
    #FF0000 100%
  );
}