Break graded css colors into bars?

Question

I'd like to take a style for graded colors and make it into bars. So each bar would be a solid color, from red at the top, then slightly orange, then more orange, then even more orange, then orange, then orange but a bit yellow, etc.

Has anyone figured this out as a css trick?

The code I'm starting from is:

#grad {
        background: red; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
        background: linear-gradient(red, yellow); /* Standard syntax */
    }

Do you have an example of the effect you're trying to achieve? — Sam Ternent, Feb 23 '16 at 10:12
Thanks for the suggestions all. I have added an image that will give a better idea, I hope. The gradient is segmented, but it is still just style on a gradient, so it can be "background" to some text that is centered by it. — Snow, Feb 24 '16 at 05:07
Have a look at this - http://stackoverflow.com/questions/27606260/blocky-gradient-effect-in-css3/27613861?s=1|8.5918#27613861. It may help you. — Harry, Feb 24 '16 at 07:20
@Snow If you are still looking for answer i updated my answer. — Nenad Vracar, Mar 04 '16 at 19:06

score 2 · Answer 1 · answered Feb 23 '16 at 10:12

2

Something like this maybe?

.gradients {
background: orange;
background: -webkit-gradient(linear,  left top,  left bottom, 
    color-stop(0%, rgba(255, 0, 0, 1)), 
    color-stop(20%, rgba(255, 255, 0, 1)),
    color-stop(40%, rgba(0, 255, 0, 1)),
    color-stop(60%, rgba(0, 0, 255, 1)),
    color-stop(80%, rgba(255, 0, 255, 1)),
    color-stop(100%, rgba(255, 0, 0, 1)));

}

answered Feb 23 '16 at 10:12

Jamie Paterson

426
3
10

Just exchange the rgba for the values you want of course :) – Jamie Paterson Feb 23 '16 at 10:13

score 1 · Answer 2 · answered Feb 23 '16 at 10:16

Do you want something like this?

div {
  width: 400px;
  height: 400px;
  background: repeating-linear-gradient(to right, transparent 0%, transparent 30%, white 30%, white 80%, transparent 80%, transparent 100%), linear-gradient(to right, red 0%, yellow 100%);
  background-size: 10px 100%, 100% 100%;
}

Working Fiddle

Nenad Vracar · Answer 3 · 2016-03-04T19:05:43.063

You could do something like this with linear-gradient and border

body, html {
  margin: 0;
  padding: 0;
}

#grad {
  min-height: 100vh;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, #81EDDD 14.3%, #94DFC1 14.3%, #94DFC1 28.6%, #ABD2A3 28.6%, #ABD2A3 42.9%, #C0C38A 42.9%, #C0C38A 57.2%, #D3B56C 57.2%, #D3B56C 71.5%, #EAA750 71.5%, #EAA750 85.8%, #FF9934 85.8%);
}

p {
  padding: 0 50px;
  max-width: 250px;
}

<div id="grad">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis.</p>
</div>

score 0 · Answer 4 · answered Feb 23 '16 at 10:34

It's really just a matter of playing with colors...

HTML:

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>

css:

div { height: 20px; margin: 0 0 10px 0; }

.a { 
background: linear-gradient(to bottom, rgb(255,0,0) 0%, rgb(150,0,0) 100%);
}
.b { 
background: linear-gradient(to bottom, rgb(255,0,0) 0%, rgb(150,100,0) 100%);
}
.c { 
background: linear-gradient(to bottom, rgb(255,0,0) 0%, rgb(200,150,0) 50%);
}
.d { 
background: linear-gradient(to bottom, rgb(255,60,0) 0%, rgb(250,200,0) 90%);
}
.e { 
background: linear-gradient(to bottom, rgb(255,150,0) 0%, rgb(250,250,0) 90%);
}
.f { 
background: linear-gradient(to bottom, rgb(255,200,0) 0%, rgb(250,250,0) 90%);
}

fiddle

As answers clearly show there are a few ways to do it.

Break graded css colors into bars?

4 Answers4