CSS Animated Rain Drop Effect

A simple CSS aminated rain drop effect that you can easily insert in your project. Check the video and grab the code below.

Code snippet

<div class="eb-animated-lines">
  <div class="eb-animated-lines__line"></div>
  <div class="eb-animated-lines__line"></div>
  <div class="eb-animated-lines__line"></div>
  <div class="eb-animated-lines__line"></div>
  <div class="eb-animated-lines__line"></div>
  <div class="eb-animated-lines__line eb-animated-lines__line--active eb-animated-lines__line--delay-1"></div>
  <div class="eb-animated-lines__line"></div>
  <div class="eb-animated-lines__line eb-animated-lines__line--active"></div>
  <div class="eb-animated-lines__line"></div>
  <div class="eb-animated-lines__line eb-animated-lines__line--active eb-animated-lines__line--delay-2"></div>
  <div class="eb-animated-lines__line"></div>
  <div class="eb-animated-lines__line"></div>
  <div class="eb-animated-lines__line"></div>
  <div class="eb-animated-lines__line"></div>
  <div class="eb-animated-lines__line eb-animated-lines__line--active eb-animated-lines__line--delay-3"></div>
  <div class="eb-animated-lines__line"></div>
  <div class="eb-animated-lines__line eb-animated-lines__line--active eb-animated-lines__line--delay-2"></div>
  <div class="eb-animated-lines__line"></div>
  <div class="eb-animated-lines__line"></div>
  <div class="eb-animated-lines__line"></div>
</div>


<style>
.eb-animated-lines {
  display: flex;
  justify-content: center;
  height: 100%;
  gap: 1.5rem;
  transform: rotate(45deg);
}
.eb-animated-lines-container {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.eb-animated-lines__line {
  width: 3px;
  height: 100%;
  border-radius: 6px;
  position: relative;
  transform: scaleY(2.4);
  background-color: #e3e9f1;
}
.eb-animated-lines__line--active::after {
  content: "";
  display: block;
  position: absolute;
  height: 200px;
  width: 100%;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom, #b3a6fa 0%, #8ccbff 26%, transparent 52%, transparent 100%);
  animation: drop 6s 0s infinite;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}
.eb-animated-lines__line--delay-1::after {
  animation-delay: 250ms;
}
.eb-animated-lines__line--delay-2::after {
  animation-delay: 500ms;
}
.eb-animated-lines__line--delay-3::after {
  animation-delay: 600ms;
}

@keyframes drop {
  0% {
    bottom: -30%;
  }
  100% {
    bottom: 110%;
  }
}
</style>