fixed gradient for different div heights

user_16297723 0
Viewed 41

I'm looking for solution to my problem. I'm building app for practice, that shows graph how much coding I did in week, every day. I want every bar to have 'static'gradient, and not spread evenly for diferent heights. that's how it's now and that's how i want it to be. Thanks in advance!

gradient css
1 Answers

You can use a mixture of pixels and percentages to achieve this:

div{
  background-image: -webkit-linear-gradient(bottom, #f00 50px, #444 150px, #3465a4 250px, #204a87 100%);
 width:50px;
 display: inline-block;
}

.one{
  height: 150px;
}

.two{
  height: 250px;
}

.three{
  height: 100px;
}
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

user_5590790
Related