Break graded css colors into bars? - css

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 */
}

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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>