CSS3 Block Gradient Effect

Question

Is it possible for the lower gradient to look more “blocky”, so that instead of a gradual transition from green to red, this is done as shown in the figure below?

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 could set a variable so that I could choose how many blocks would consist of a gradient. Can anyone help?

Answer 1

This can be achieved using linear-gradient . Setting multiple colors for a gradient can be accomplished by assigning multiple color stops, and the blocking effect can be achieved by next triggering the color at the same place where the current color ends (i.e. the same stop percentage for the current end position of the color and the next starting position of the color )

In standards compliant browsers, the following line is necessary:

 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 have a similar effect in older versions of the browser, we must also include vendor prefix versions.

 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 below, we will need to use filters , as indicated in this CSS Tricks article because they do not support linear-gradient .

Can I Use - Linear Gradients

Answer 2

you can use box-shadow if you want a specific 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 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> 

Answer 4

Use a few stops (although you need to determine the substeps, this 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 5

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

 <div></div> 

you see stop # 2BFF00 in the same place as # 00A3EF, at 50%.