CODEWITHSUNDEEP
css
Snow
Snow

Reputation: 47

Break graded css colors into bars?

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

enter image description here

Upvotes: 1

Views: 73

Answers (4)

Nenad Vracar
Nenad Vracar

Reputation: 122047

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>

Upvotes: 0

Scott
Scott

Reputation: 21882

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.

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41832

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

Upvotes: 1

Jamie Paterson
Jamie Paterson

Reputation: 446

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

}

Upvotes: 2

Related Questions