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

<div id="gradients" style="width:450px; height:20px"></div>

Answer 2

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

<div></div>

you see how the stop of #2BFF00 is at the same location of the #00A3EF in 50%.

Answer 3

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>

Answer 4

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

<div class="gradient g-1"></div>
<div class="gradient g-3"></div>
<div class="gradient g-5"></div>
<div class="gradient g-9"></div>
<div class="gradient g-17"></div>
<div class="gradient g-inf"></div>

Answer 5

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