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>