How to change the color of Element depending on its height using CSS?

Question

So what i wanna do is change the Color of an div Element depending on its height.

For example: If the div has a height of <= 20% i want it to be green, if its ab

Answer 1

Here is a trick with gradient background where you can rely on background-size and repeat. The idea is to eiher have a negative value of size (no coloration) or positive value and with the repeat you will have a full coloration.

Here is an example where I am defining 3 ranges: from 0 to 100px (orange), from 100px to 200px (blue), bigger than 200px (red).

I am setting the height manually but it can be set automatically by the content:

.box {
  min-height:50px;
  margin:10px;
  border:1px solid;
  background:
    linear-gradient(red,red)   left/100% calc(100% - 200px),
    linear-gradient(blue,blue) left/100% calc(100% - 100px),
    orange;
}

<div class="box"></div>

<div class="box" style="height:120px"></div>

<div class="box" style="height:220px"></div>

The same can work with width too (resize the screen to test):

.box {
  min-height:50px;
  margin:10px;
  border:1px solid;
  background:
    linear-gradient(red,red)   left/calc(100% - 800px) 100%,
    linear-gradient(blue,blue) left/calc(100% - 600px) 100%,
    orange;
}

<div class="box"></div>

---

We can expand the same trick to text coloration too:

.box {
  min-height:50px;
  margin:10px;
  font-size:20px;
  border:1px solid #000;
  background:
    linear-gradient(red,red)   left/100% calc(100% - 200px),
    linear-gradient(blue,blue) left/100% calc(100% - 100px),
    orange;
  
   -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

<div class="box"> I am an orange text</div>

<div class="box" style="height:120px">  I am a blue text</div>

<div class="box" style="height:220px">  I am a red text</div>

Also to borders:

.box {
  min-height:50px;
  margin:10px;
  border:5px solid transparent;
  background:
    /*Background coloration (color padding-box)*/
    linear-gradient(red,red)       padding-box,
    linear-gradient(blue,blue)     padding-box,
    linear-gradient(orange,orange) padding-box,
    
    /*Border coloration (color the border-box)*/
    linear-gradient(purple,purple)  border-box,
    linear-gradient(green,green)    border-box,
    linear-gradient(#000,#000)      border-box; 
   
  background-size:
    100% calc(100% - 200px),
    100% calc(100% - 100px),
    100% 100%;
}

<div class="box"></div>

<div class="box" style="height:120px"></div>

<div class="box" style="height:220px"></div>

Finally, we can have border, text and background at the same time (Doesn't work on Firefox due to a bug)

.box {
  min-height:50px;
  margin:10px;
  font-size:25px;
  border:5px solid transparent;
  background:
    /*Text coloration*/
    linear-gradient(yellow,yellow) ,
    linear-gradient(grey,grey) ,
    linear-gradient(#fff,#fff),
  
    /*Background coloration*/
    linear-gradient(red,red),
    linear-gradient(blue,blue),
    linear-gradient(orange,orange),
    
    /*Border coloration*/
    linear-gradient(purple,purple),
    linear-gradient(green,green),
    linear-gradient(#000,#000); 
    
    background-size:
      100% calc(100% - 200px),
      100% calc(100% - 100px),
      100% 100%;
    
    -webkit-background-clip: 
      text,text,text,
      padding-box,padding-box,padding-box,
      border-box,border-box,border-box;
     background-clip: 
      text,text,text,
      padding-box,padding-box,padding-box,
      border-box,border-box,border-box;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

<div class="box">some text here</div>

<div class="box" style="height:120px">some text here</div>

<div class="box" style="height:220px">some text here</div>

---

For all the above we can have a coloration that depends on the height and the width together.

Here is an interactive demo:

.box {
  padding:10px;
  display:inline-block;
  margin:10px;
  font-size:20px;
  resize:both;
  overflow:auto;
  
  border:1px solid;
  background:
    linear-gradient(green,green),
    linear-gradient(red,red),
    linear-gradient(blue,blue),
    linear-gradient(orange,orange),
    yellow;
  background-size:
    calc(100% - 400px) calc(100% - 300px),
    calc(100% - 400px) calc(100% - 200px),
    calc(100% - 200px) calc(100% - 100px),
    calc(100% - 100px)  calc(100% - 50px);
}

<div class="box">resize me</div>