Efeito gradiente de blocos em CSS3

É possível fazer com que o gradiente abaixo pareça mais “blocky”, de modo que, em vez de mudar gradualmente de verde para vermelho, seja feito em etapas como a imagem abaixo?

Efeito desejado:

insira a descrição da imagem aqui

Atualmente:

#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, eu seria capaz de definir uma variável para que eu pudesse escolher quantos blocos o gradiente consistiria. Alguém pode ajudar?

Isto pode ser conseguido usando linear-gradient . A definição de várias colors para o gradiente pode ser feita atribuindo várias paradas de cor e o efeito blocky pode ser obtido fazendo com que a próxima cor comece no mesmo local onde a cor atual termina (ou seja, mesma porcentagem de parada da posição final da cor atual e a posição inicial da próxima cor).

Em navegadores compatíveis com padrões, o seguinte é a única linha de código que seria necessária:

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

No entanto, para produzir um efeito semelhante em versões mais antigas de navegadores, também temos que include as versões prefixadas do fornecedor.

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

você pode usar box-shadow se quiser que determinada cor seja mostrada

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

Alguns exemplos usando 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 várias paradas ( embora seja necessário definir as subetapas, isso não pode ser feito automaticamente )

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