6

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:

enter image description here

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?

Harry
  • 87,580
  • 25
  • 202
  • 214
yesman
  • 7,165
  • 15
  • 52
  • 117
  • 5
    You could give multiple color stops and percentages like [this](http://jsfiddle.net/a2a8hxn1/). Not sure if I understood your question clearly though. – Harry Dec 22 '14 at 16:11
  • Thanks Harry, if you post your link as an answer I will accept it! It uses the least amount of code out of all the answers here, while getting the effect I want. – yesman Dec 22 '14 at 17:53
  • @Bas: I have added the css-shapes tag to this question though this is not exactly a shapes question because I felt that the approach in these answers could help future users who may want to create multiple differently colored but adjacent blocks using a single element. Please feel free to rollback if you don't think it is apt :) – Harry Jan 22 '15 at 05:53

6 Answers6

6

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>
Vitorino fernandes
  • 15,794
  • 3
  • 20
  • 39
  • 1
    Nice alternate to the gradients. – Harry Dec 22 '14 at 16:47
  • Good alternative and I have considered it, but for my specific case box shadows are not an option. It might be a good solution for others though, so thanks! – yesman Dec 23 '14 at 05:47
  • Nice! But sadly relative values can't be used (e.g. 5 visual color blocks of equal width over the width of the element). – strarsis Mar 17 '21 at 15:35
6

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

Harry
  • 87,580
  • 25
  • 202
  • 214
  • Note that if you're doing this on a large scale (e.g. full browser width) then you can start to see some blurriness between the solid blocks. – fredrivett Mar 30 '18 at 14:58
3

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>
Oriol
  • 274,082
  • 63
  • 437
  • 513
  • Sadly, using equidistant colors, green and red colors look too similar. So custom colors should be used instead. – Oriol Dec 22 '14 at 17:07
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>
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
0

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%.

aahhaa
  • 2,240
  • 3
  • 19
  • 30
0

It also can be dynamically generated by Javascript.

var randomColors =  ["#CA5BBA", "#98B0EB", "#045E4F", "#11D7DD", "#44BFEC", "#80865C", "#A48D16", "#CFD00E", "#3289D0", "#15ED3D", "#48C982", "#95DB00", "#E24730", "#F8705D", "#9467EA", "#EC86AF", "#A1E9DE", "#D220CD", "#F4FE91", "#CC6869", "#DD82D3"]

function generateGradientBanding(direction, colors) {
  const gradientParts = []

  colors.forEach((color, i) => {
    gradientParts.push(`${color} ${(100 / colors.length) * i}%`)
    gradientParts.push(`${color} ${(100 / colors.length) * (i + 1)}%`)
  })

  return `linear-gradient(${direction}, ${gradientParts.join(', ')})`
}

$("#canvas").css({backgroundImage:generateGradientBanding("90deg", randomColors)})
#canvas {
  height: 100%;
  width: 100%;
}
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="canvas">&nbsp;</div>
mkpoli
  • 47
  • 1
  • 6