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?

Desired effect:

Currently:

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

Ideally, I'd be able to set a variable so I can choose how many blocks the gradient would consist of. Can anyone help?

Answer 1

This can be achieved using linear-gradient. Setting multiple colors to the gradient can be done by assigning multiple color stops and the blocky effect can be achieved by making the next color start at the exact same place where the current color ends (that is, same stop percentage for the current color's end position and the next color's start position).

In standards compliant browsers, the following is the only line of code that would be needed:

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

However, in-order to produce a similar effect in older browser versions, we have to include the vendor prefixed versions also.

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

<div></div>

For IE 9 and lower, we would have to use filters like mentioned in this CSS Tricks article because they don't support linear-gradient.

Can I Use - Linear Gradients

Answer 2

you can use box-shadow if you want certain color to show

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

<div id="gradients"></div>