← All Examples

CSS Rain Effect

Animated rain streaks using absolutely-positioned elements and staggered @keyframes.

Published July 1, 2026

Demo

☔ CSS Rain

HTML

<div class="rain-stage">
  <div class="drop"></div>
  <!-- repeat 15–20 drops -->
</div>

CSS

.drop {
  position: absolute;
  top: -20px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(147,197,253,.8));
  animation: rain-fall linear infinite;
}

.drop:nth-child(1) {
  left: 5%; height: 18px;
  animation-duration: 1.1s; animation-delay: 0s;
}

@keyframes rain-fall {
  0%   { transform: translateY(0); opacity: 0; }
  5%   { opacity: 1; }
  100% { transform: translateY(220px); opacity: 0; }
}

How it works

Rain drops are thin <div> elements with a vertical gradient from transparent to a semi-transparent blue-white. Each drop starts above the container (top: -20px) and animates to the bottom via translateY. Varying animation-duration (0.8s–1.4s) and animation-delay values stagger the drops so they don't all fall together. The container uses overflow: hidden to clip drops once they exit.