A Pen by Adam Henley.

index.html

<ul class="rack">
  <li class="tube"><div class="liquid blood"></div></li>
  <li class="tube"><div class="liquid water"></div></li>
  <li class="tube"><div class="liquid green"></div></li>
  <li class="tube"><div class="liquid yellow"></div></li>
  <li class="tube"><div class="liquid pink"></div></li>
</ul>

Purce-CSS-Simple-test-tubes.markdown

Purce CSS Simple test-tubes

A Pen by Adam Henley on CodePen.

License.

style.less

body{background-color: darken(rgba(200,230,255,1),50%);}
/*:after,:before{content:" "; position:absolute;display:block;}*/
ul{list-style-type:none;}
.centered{ position:absolute; margin:auto; right:0;bottom:0;left:0; top:95px;}
.border-bottom-radius(@v){ .border-bottom-left-radius(@v); .border-bottom-right-radius(@v); }
.border-top-radius(@v){.border-top-left-radius(@v); .border-top-right-radius(@v);}

/**Dimensions **/
@rack_height:200px;


.rack{
  .centered;
  height:@rack_height;
  min-width:450px;
  width:450px;
  border-top:10px solid @brown;
  border-bottom:10px solid @brown;  
  text-align: justify;
  font-size: 0.1px; 
  padding-left:60px;padding-right:60px;
}
.rack:before{
  content:" ";
  position:absolute;
  float:left;
  height:@rack_height+40px;
  top:-4%;
  left: 8%;
  width:80%;
  border-top:none;
  border-left:10px solid darken(@brown,4%);
  border-right:10px solid darken(@brown,4%);
  z-index:-1;
}
.rack:after{
  content:" ";
  width: 100%; 
  display: inline-block; 
}

.test_tube_bottom{
  .border-bottom-radius(50% 5%);
}
  

li.tube{
  width:35px;
  position:relative;
  display:inline-block;
  height:@rack_height+40px;  
  top: -39px;
  .glass;
  .test_tube_bottom;
  .border-top-radius(3px);
  z-index:-1;
  overflow:hidden;
  margin:0 auto;
}

.liquid{
  position:absolute;
  width:83%;
  bottom:3px;
  margin: 0 auto;
  left:1px; right:0;
  z-index:-1000;
  .test_tube_bottom;
}

.blood { 
  background-color:rgba(255,0,0,0.5); 
  height:75%;
}
.water {
  background-color:rgba(200,230,255,0.9); 
  height:50%;
}
.green {
  background-color:rgba(200,255,200,0.8); 
  height:70%;
}
.yellow {
  background-color:rgba(242, 226, 104,0.6); 
  height:65%;
}
.pink{
  background-color:rgba(180,180,255,0.9); 
  height:50%;
}


/** Colours **/
@brown: rgba(137, 93, 59,1);
.glass{
background: -moz-linear-gradient(left,  rgba(254,255,255,0.5) 0%, rgba(221,241,249,0.5) 35%, rgba(201,227,237,0.5) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(254,255,255,0.5)), color-stop(35%,rgba(221,241,249,0.5)), color-stop(100%,rgba(201,227,237,0.5))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(254,255,255,0.5) 0%,rgba(221,241,249,0.5) 35%,rgba(201,227,237,0.5) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(254,255,255,0.5) 0%,rgba(221,241,249,0.5) 35%,rgba(201,227,237,0.5) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(254,255,255,0.5) 0%,rgba(221,241,249,0.5) 35%,rgba(201,227,237,0.5) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(254,255,255,0.5) 0%,rgba(221,241,249,0.5) 35%,rgba(201,227,237,0.5) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80feffff', endColorstr='#80c9e3ed',GradientType=1 ); /* IE6-9 */
}