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

Use multiple stops (although you need to define the substeps, it cannot be done automatically)

#gradients {
  background-image: linear-gradient(to right, 
    green       0%,     green       14.28%,
    greenyellow 14.28%, greenyellow 28.58%,
    yellow      28.58%, yellow      42.85%, 
    orange      42.85%, orange      57.14%,
    darkorange  57.14%, darkorange  71.42%, 
    red         71.42%, red         85.71%, 
    brown       85.71%);
}