CODEWITHSUNDEEP
cssgradient
DeadBoyPiotrek
DeadBoyPiotrek

Reputation: 148

fixed gradient for different div heights

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!

Upvotes: 2

Views: 51

Answers (1)

Miro
Miro

Reputation: 8650

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>

Upvotes: 1

Related Questions