* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      height: 100vh;
      overflow: hidden;
      background: linear-gradient(#162337, #293d55);
    }

.rain {
      position: fixed;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }

.drop {
      position: absolute;
      top: -100px;
      width: 2px;
      height: 70px;
      border-radius: 50%;
      background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 255, 255, 0.7)
      );

animation: fall linear infinite;
    }

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

10% {
        opacity: 0.8;
      }

90% {
        opacity: 0.8;
      }

100% {
        transform: translateY(110vh);
        opacity: 0;
      }
    }

/* Individual drops */
    .drop:nth-child(1)  { left: 5%;  animation-duration: 0.8s; animation-delay: 0.1s; }
    .drop:nth-child(2)  { left: 12%; animation-duration: 1.2s; animation-delay: 0.4s; }
    .drop:nth-child(3)  { left: 19%; animation-duration: 0.9s; animation-delay: 0.2s; }
    .drop:nth-child(4)  { left: 27%; animation-duration: 1.4s; animation-delay: 0.7s; }
    .drop:nth-child(5)  { left: 34%; animation-duration: 0.75s; animation-delay: 0.3s; }
    .drop:nth-child(6)  { left: 41%; animation-duration: 1.1s; animation-delay: 0.8s; }
    .drop:nth-child(7)  { left: 48%; animation-duration: 0.85s; animation-delay: 0.15s; }
    .drop:nth-child(8)  { left: 55%; animation-duration: 1.3s; animation-delay: 0.5s; }
    .drop:nth-child(9)  { left: 62%; animation-duration: 0.95s; animation-delay: 0.2s; }
    .drop:nth-child(10) { left: 69%; animation-duration: 1.25s; animation-delay: 0.6s; }
    .drop:nth-child(11) { left: 76%; animation-duration: 0.8s; animation-delay: 0.1s; }
    .drop:nth-child(12) { left: 83%; animation-duration: 1.15s; animation-delay: 0.45s; }
    .drop:nth-child(13) { left: 90%; animation-duration: 0.9s; animation-delay: 0.3s; }
    .drop:nth-child(14) { left: 97%; animation-duration: 1.35s; animation-delay: 0.75s; }

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground