<br>
<b>CSS Only Liquid Dripping Effect</b>
<br>
Can be used as a background and multiple layers of liquid can be created.
<br>
<div class="container">
    
  <div class="blobs">
    <div class="liquid"></div>
    <div class="blob"></div>
    <div class="blob"></div>
    <div class="blob"></div>
    <div class="blob"></div>
    <div class="blob"></div>
    <div class="blob"></div>
    <div class="blob"></div>
    <div class="blob"></div>
  </div>   
  <h1 class="text">LIQUID<br>DRIP</h1>
</div>

<div class=""></div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="0">
  <defs>
    <filter id="goog">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
      <feBlend in="SourceGraphic" in2="goo" />
    </filter>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
      <feBlend in="SourceGraphic" in2="goo"/>
   </filter>
  </defs>
</svg>
@import url('https://fonts.googleapis.com/css?family=Raleway:300,700,900');
@mixin leftPos($count){
  @for $i from 1 through $count {
      &:nth-child(#{$i}) {
  		left:((($i)-2)*13)-1%;
	  }
  }
}
/////////////////////////////////////
body{
  background:#5444c4;
  color:#FFF;
  margin:0;
  font-family: 'Raleway', sans-serif;
  text-align:center;
  letter-spacing:0.08em;
  }
b{
  font-size:28px;
  color:#FFF;
}
.container{
  width:300px;
  height:500px;
  margin:15px auto;
  background:#6cd2ff;
  overflow:hidden; 
  position:relative;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.text{
  position:absolute;
  left:50%;
  top:45%;
  transform:translate(-50%,-50%);
  text-align:center;
  color:#6cd2ff;
  font-size:64px;
  font-weight:900;
  }
.liquid{
    width:120%;
    height:10px;
    position:absolute;
    top:-2%;
    left:-10%;
    background:#FFF;
    border-radius:10%;
 	animation: liquid 5s infinite;
    }

.blobs{
  filter:url('#goo');
  width:100%;
  height:100%;
  position:relative;
  
  .blob{
    width:30px;
    height:30px;
    margin:0 5px 0px 0;
    background:#FFF;
    border-radius:50%;
    position:absolute;
    top:0;
    @include leftPos(9);
    animation: drip_one 5s infinite;
      
      &:nth-of-type(4n-7){
        width:65px;
      	animation: drip_four 5s infinite;
        } 
      &:nth-of-type(3n-2){
        width:26px;
        }
      &:nth-of-type(2){
      	width:22px;
    	
      }
  	  &:nth-of-type(8){
        animation: drip_five 5s infinite;
        }
      &:nth-of-type(4n+2){
        height:56px;
        animation: drip_two 5s infinite;
        }
      &:nth-of-type(6n-2){
        height:42px;
    	animation: drip_three 5s infinite;
        }
    }

  }

@keyframes drip_one{
  from{top:0;}
  to{top:103%;}
  }  
@keyframes drip_two{
  from{top:0;}
  to{top:104%;}
  }
@keyframes drip_three{
  from{top:0;height:52px;}
  to{top:102%;height:132px;}
  } 
@keyframes drip_four{
  from{top:0;width:65px;height:30px;}
  to{top:102%;width:75px;height:45px;}
  } 
@keyframes drip_five{
  from{top:0;height:30px;}
  to{top:102%;height:72px;}
  } 
@keyframes liquid{
  from{height:15px;}
  to{height:109%;}
  }
View Compiled
//Inspiration from Cuberto  https://dribbble.com/shots/3206606-Landing-page-wip
//Thanks Cuberto for this amazing concept.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.