<!DOCTYPE html>
<html>
<head>
    <title>Pure CSS Animated Background Tutorial - Dripping Liquid Effect</title>
</head>
<body>
  <div class="cont">
    <div class="drip"></div>
    <div class="drip"></div>
    <div class="drip"></div>
    <div class="drip"></div>
    <div class="drip"></div>
    <div class="drip"></div>
    <div class="drip"></div>
    <div class="drip"></div>
    <div class="drip"></div>
    <div class="drip"></div>
    <div class="drip"></div>
    <div class="drip"></div>
    <div class="drip"></div>
    <div class="drip"></div>
    <div class="drip"></div>
    <div class="drip"></div>
    <div class="drip"></div>
    <div class="drip"></div>
    <div class="drip"></div>
    <div class="drip"></div>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <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>
  </div>
</body>
</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #efefef;
}
.cont{
  width:100vw;
  height:100vh;
  position:relative;
  overflow:hidden;
  border-top:15px solid black;
  border-bottom:15px solid black;

  filter:url("#goo");
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.cont .drip{
  height:30px;
  width:30px;
  border-radius: 50%;
  background:black;
  position:absolute;
  top:-100%;
  animation:falling 5s linear infinite;
}
@keyframes falling{
  0%{
    top:-100%;
  }
  50%{
    top:0%;
  }
  80%{
    top:80%;
  }
  100%{
    top:100%;
  }
}
.cont .drip:nth-child(1){
  border-color:black;
  height:29px;
  width:29px;
  animation-delay: -0.2s;
  background:blue;
  left:173px;
  margin-left:60px;
}
.cont .drip:nth-child(2){
  border-color:black;
  height:25px;
  width:25px;
  animation-delay: -0.4s;
  background:black;
  left:76px;
  margin-left:60px;
}
.cont .drip:nth-child(3){
  border-color:black;
  height:38px;
  width:38px;
  animation-delay: -0.6s;
  background:black;
  left:96px;
  margin-left:60px;
}
.cont .drip:nth-child(4){
  border-color:black;
  height:29px;
  width:29px;
  animation-delay: -0.8s;
  background:black;
  left:24px;
  margin-left:60px;
}
.cont .drip:nth-child(5){
  border-color:black;
  height:20px;
  width:20px;
  animation-delay: -1s;
  background:black;
  left:93px;
  margin-left:60px;
}
.cont .drip:nth-child(6){
  border-color:black;
  height:14px;
  widows: 14px;
  animation-delay: -1.2;
  background:black;
  left:117px;
  margin-left:60px;
}
.cont .drip:nth-child(7){
  border-color:black;
  height:5px;
  width:5px;
  animation-delay: -1.4s;
  background:black;
  left:31px;
  margin-left:60px;
}
.cont .drip:nth-child(8){
  border-color:black;
  height:2px;
  width:2px;
  animation-delay: -1.6s;
  background:black;
  left:4px;
  margin-left:60px;
}
.cont .drip:nth-child(9){
  border-color:black;
  height:2px;
  width:2px;
  animation-delay: -1.8s;
  background:black;
  left:14px;
  margin-left:60px;
}
.cont .drip:nth-child(10){
  border-color:black;
  height:16px;
  width:16px;
  animation-delay: -2s;
  background:black;
  left:143px;
  margin-left:60px;
}
.cont .drip:nth-child(11){
  border-color:black;
  height:11px;
  width:11px;
  animation-delay: -2.2s;
  background:black;
  left:10px;
  margin-left:60px;
}
.cont .drip:nth-child(12){
  border-color:black;
  height:4px;
  width:4px;
  animation-delay: -2.4s;
  background:black;
  left:158px;
  margin-left:60px;
}
.cont .drip:nth-child(13){
  border-color:black;
  height:18px;
  width:18px;
  animation-delay: -2.6s;
  background:black;
  left:163px;
  margin-left:60px;
}
.cont .drip:nth-child(14){
  border-color:black;
  height:4px;
  width:4px;
  animation-delay: -2.8s;
  background:black;
  left:168px;
  margin-left:60px;
}
.cont .drip:nth-child(15){
  border-color:black;
  height:13px;
  width:13px;
  animation-delay: -3s;
  background:black;
  left:103px;
  margin-left:60px;
}
.cont .drip:nth-child(16){
  border-color:black;
  height:40px;
  width:40px;
  animation-delay: -3.2s;
  background:black;
  left:158px;
  margin-left:60px;
}
.cont .drip:nth-child(17){
  border-color:black;
  height:27px;
  width:27px;
  animation-delay: -3.4s;
  background:black;
  left:179px;
  margin-left:60px;
}
.cont .drip:nth-child(18){
  border-color:black;
  height:13px;
  width:13px;
  animation-delay: -3.6s;
  background:black;
  left:97px;
  margin-left:60px;
}
.cont .drip:nth-child(19){
  border-color:black;
  height:23px;
  width:23px;
  animation-delay: -3.8s;
  background:black;
  left:149px;
  margin-left:60px;
}
.cont .drip:nth-child(20){
  border-color:black;
  height:20px;
  width:20px;
  animation-delay: -4s;
  background:red;
  left:156px;
  margin-left:60px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.