Efecto de gradiente Blocky en CSS3

¿Es posible hacer que el degradado de abajo se vea más “en bloques”, de modo que en lugar de cambiar de verde a rojo gradualmente, se haga en pasos como en la imagen de abajo?

Efecto deseado:

enter image description here

Actualmente:

#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%); } 
 

Idealmente, podría establecer una variable para poder elegir en cuántos bloques estaría compuesto el degradado. ¿Alguien puede ayudar?

Esto se puede lograr usando linear-gradient . El ajuste de varios colores al degradado se puede realizar asignando múltiples paradas de color y el efecto de bloque se puede lograr haciendo que el siguiente color comience exactamente en el mismo lugar donde termina el color actual (es decir, el mismo porcentaje de detención para la posición final del color actual y la posición de inicio del próximo color).

En navegadores compatibles con estándares, la siguiente es la única línea de código que se necesitaría:

 background: linear-gradient(to right, green 20%, yellowgreen 20%, yellowgreen 40%, yellow 40%, yellow 60%, orange 60%, orange 80%, red 80%); 

Sin embargo, para producir un efecto similar en las versiones anteriores del navegador, también debemos incluir las versiones prefijadas del proveedor.

 div { height: 20px; width: 450px; background: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.2, green), color-stop(0.2, yellowgreen), color-stop(0.4, yellowgreen), color-stop(0.4, yellow), color-stop(0.6, yellow), color-stop(0.6, orange), color-stop(0.8, orange), color-stop(0.8, red)); background: -webkit-linear-gradient(to right, green 20%, yellowgreen 20%, yellowgreen 40%, yellow 40%, yellow 60%, orange 60%, orange 80%, red 80%); background: -moz-linear-gradient(to right, green 20%, yellowgreen 20%, yellowgreen 40%, yellow 40%, yellow 60%, orange 60%, orange 80%, red 80%); background: -o-linear-gradient(to right, green 20%, yellowgreen 20%, yellowgreen 40%, yellow 40%, yellow 60%, orange 60%, orange 80%, red 80%); background: linear-gradient(to right, green 20%, yellowgreen 20%, yellowgreen 40%, yellow 40%, yellow 60%, orange 60%, orange 80%, red 80%); } 
 

puedes usar box-shadow si quieres que cierto color se muestre

 #gradients { width: 52px; display: block; height: 30px; background: #22b14c; box-shadow: #b5e61d 52px 0px 0px 0px, #fff200 104px 0px 0px 0px, #ffc90e 156px 0px 0px 0px, #ff7f27 208px 0px 0px 0px, #ed1c24 260px 0px 0px 0px; } 
 

Algunos ejemplos que usan gradientes:

 .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% ); } 
 

Use paradas múltiples ( aunque necesita definir los pasos intermedios, no se puede hacer automáticamente )

 #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%); } 
 
 div { height:200px; width:400px; display:block; background-image: linear-gradient(to left, #2BFF00 50%, #00A3EF 50%); }