AI CSS Animations

Rain on Window Background

Beads of rain cling to a window over blurred city lights while bigger drops slide down in fits and starts, leaving wet trails. The stop and go comes from keyframes with short, nearly flat segments.

Also known as: raindrops on glass css, rainy window background, rain drops animation css.

HTML

<div class="bgx-rain-on-window" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>

CSS

.bgx-rain-on-window {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle 3.5em at 14% 72%, color-mix(in srgb, var(--c) 55%, transparent), transparent),
    radial-gradient(circle 2.5em at 36% 58%, rgb(255 180 90 / 0.45), transparent),
    radial-gradient(circle 4em at 62% 80%, color-mix(in srgb, var(--c) 40%, transparent), transparent),
    radial-gradient(circle 2.2em at 80% 52%, rgb(255 110 120 / 0.4), transparent),
    radial-gradient(circle 3em at 93% 84%, rgb(255 200 120 / 0.35), transparent),
    radial-gradient(circle 2em at 48% 90%, rgb(255 230 180 / 0.3), transparent),
    linear-gradient(to bottom, #0b1020, color-mix(in srgb, var(--c) 22%, #121a2e));}
.bgx-rain-on-window::before,
.bgx-rain-on-window::after {
  content: "";
  position: absolute;
  inset: 0;
}
.bgx-rain-on-window::before {
  background-size: 9em 9em;
  background-image:
    radial-gradient(circle 0.2em at 4.2% 87.6%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 95.4% 62.9%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 67.5% 12.9%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 62% 15.7%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 28% 67.4%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 28.8% 53.5%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 43.6% 73.2%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 61.6% 71.8%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 70.9% 40.3%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 26.3% 76.5%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 81.1% 57.9%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 19.8% 37.6%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 18.5% 84.5%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 59.3% 37.9%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 38.6% 10.5%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 14.1% 8%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent);
}
.bgx-rain-on-window::after {
  background-size: 14.5em 13em;
  background-image:
    radial-gradient(circle 0.38em at 4.2% 19.8%, rgb(220 232 255 / 0.32) 0 18%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.36) 80%, transparent),
    radial-gradient(circle 0.38em at 50.4% 55.3%, rgb(220 232 255 / 0.32) 0 18%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.36) 80%, transparent),
    radial-gradient(circle 0.38em at 73.6% 53.1%, rgb(220 232 255 / 0.32) 0 18%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.36) 80%, transparent),
    radial-gradient(circle 0.38em at 70.7% 48.6%, rgb(220 232 255 / 0.32) 0 18%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.36) 80%, transparent),
    radial-gradient(circle 0.38em at 61% 55.4%, rgb(220 232 255 / 0.32) 0 18%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.36) 80%, transparent),
    radial-gradient(circle 0.38em at 7.3% 57.1%, rgb(220 232 255 / 0.32) 0 18%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.36) 80%, transparent),
    radial-gradient(circle 0.38em at 12.5% 79.5%, rgb(220 232 255 / 0.32) 0 18%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.36) 80%, transparent),
    radial-gradient(circle 0.38em at 71.5% 77.2%, rgb(220 232 255 / 0.32) 0 18%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.36) 80%, transparent),
    radial-gradient(circle 0.38em at 10.4% 41.7%, rgb(220 232 255 / 0.32) 0 18%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.36) 80%, transparent);
}
.bgx-rain-on-window span {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--s);
  height: 100%;
  animation: bgx-rain-on-window-slide var(--dur) cubic-bezier(0.6, 0, 0.8, 0.9) var(--delay) infinite;
}
.bgx-rain-on-window span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--s);
  height: calc(var(--s) * 1.2);
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background:
    radial-gradient(circle at 38% 66%, rgb(255 255 255 / 0.9) 0 10%, transparent 20%),
    radial-gradient(circle at 50% 60%, rgb(210 225 255 / 0.2) 35%, rgb(0 0 0 / 0.4) 80%);
  box-shadow: inset 0 -0.06em 0.1em rgb(255 255 255 / 0.35);
}
.bgx-rain-on-window span::after {
  content: "";
  position: absolute;
  top: -2.6em;
  left: 50%;
  width: calc(var(--s) * 0.3);
  height: 2.8em;
  translate: -50% 0;
  border-radius: 999em;
  background: linear-gradient(to bottom, transparent, rgb(210 225 255 / 0.1));
}
.bgx-rain-on-window span:nth-child(1) { --x: 54.1%; --s: 0.83em; --dur: 7.35s; --delay: -2.98s; }
.bgx-rain-on-window span:nth-child(2) { --x: 93.6%; --s: 1.01em; --dur: 7.66s; --delay: -9.59s; }
.bgx-rain-on-window span:nth-child(3) { --x: 83%; --s: 1.12em; --dur: 9.02s; --delay: -4.4s; }
.bgx-rain-on-window span:nth-child(4) { --x: 21.9%; --s: 0.83em; --dur: 7.37s; --delay: -7.07s; }
.bgx-rain-on-window span:nth-child(5) { --x: 37.8%; --s: 1.13em; --dur: 6.94s; --delay: -0.36s; }
.bgx-rain-on-window span:nth-child(6) { --x: 60.8%; --s: 0.87em; --dur: 9.49s; --delay: -2.77s; }
.bgx-rain-on-window span:nth-child(7) { --x: 7.9%; --s: 1em; --dur: 6.79s; --delay: -0.46s; }
@keyframes bgx-rain-on-window-slide {
  0%   { transform: translateY(-1.5em); }
  16%  { transform: translateY(14%); }
  30%  { transform: translateY(16%); }
  42%  { transform: translateY(40%); }
  58%  { transform: translateY(42%); }
  72%  { transform: translateY(70%); }
  84%  { transform: translateY(72%); }
  100% { transform: translateY(calc(100% + 3em)); }
}

@media (prefers-reduced-motion: reduce) {
  .bgx-rain-on-window, .bgx-rain-on-window *, .bgx-rain-on-window::before, .bgx-rain-on-window::after, .bgx-rain-on-window *::before, .bgx-rain-on-window *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

  • Color: set --bgx-color on the element or a parent. Currently previewing #3b82f6.
  • Pattern scale: set --bgx-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
  • Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
  • Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Similar animated backgrounds

Parallax Starfield Background
Shooting Stars Background
Spiral Galaxy Background
Warp Speed Background