Rain Background
Slanted rain in two depths pours over a dark, wet evening while ripples spread across the ground. The streaks are tiled elliptical gradients on two rotated layers.
Also known as: css rain animation, rain effect css, falling rain background.
HTML
<div class="bgx-rain" aria-hidden="true"><span></span><span></span><i></i><i></i><i></i><i></i><i></i></div>
CSS
.bgx-rain {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background:
linear-gradient(to bottom, transparent 70%, color-mix(in srgb, var(--c) 18%, transparent)),
linear-gradient(to bottom, #070b14, color-mix(in srgb, var(--c) 22%, #0f1729));}
.bgx-rain span {
position: absolute;
inset: calc(-20% - var(--tile)) -25% -20%;
rotate: 12deg;
background-size: var(--tile) var(--tile);
animation: bgx-rain-fall var(--dur) linear infinite;
}
.bgx-rain span:nth-child(1) {
--tile: 7em;
--dur: 0.8s;
background-image:
radial-gradient(0.04em 0.9em at 4.1% 68.9%, rgb(200 220 255 / 0.4) 40%, transparent),
radial-gradient(0.04em 0.9em at 92.5% 26.9%, rgb(200 220 255 / 0.4) 40%, transparent),
radial-gradient(0.04em 0.9em at 64.9% 78.3%, rgb(200 220 255 / 0.4) 40%, transparent),
radial-gradient(0.04em 0.9em at 93.7% 23.9%, rgb(200 220 255 / 0.4) 40%, transparent),
radial-gradient(0.04em 0.9em at 28.9% 69%, rgb(200 220 255 / 0.4) 40%, transparent),
radial-gradient(0.04em 0.9em at 68.8% 92.9%, rgb(200 220 255 / 0.4) 40%, transparent),
radial-gradient(0.04em 0.9em at 53% 39.9%, rgb(200 220 255 / 0.4) 40%, transparent),
radial-gradient(0.04em 0.9em at 76.6% 29%, rgb(200 220 255 / 0.4) 40%, transparent),
radial-gradient(0.04em 0.9em at 25.7% 93.9%, rgb(200 220 255 / 0.4) 40%, transparent),
radial-gradient(0.04em 0.9em at 67.8% 49%, rgb(200 220 255 / 0.4) 40%, transparent),
radial-gradient(0.04em 0.9em at 5.9% 24.3%, rgb(200 220 255 / 0.4) 40%, transparent),
radial-gradient(0.04em 0.9em at 77.6% 19.2%, rgb(200 220 255 / 0.4) 40%, transparent);
}
.bgx-rain span:nth-child(2) {
--tile: 11em;
--dur: 0.55s;
background-image:
radial-gradient(0.06em 1.5em at 4.1% 25.3%, color-mix(in srgb, var(--c) 35%, rgb(230 240 255 / 0.75)) 40%, transparent),
radial-gradient(0.06em 1.5em at 94.6% 11.7%, color-mix(in srgb, var(--c) 35%, rgb(230 240 255 / 0.75)) 40%, transparent),
radial-gradient(0.06em 1.5em at 76.9% 66.9%, color-mix(in srgb, var(--c) 35%, rgb(230 240 255 / 0.75)) 40%, transparent),
radial-gradient(0.06em 1.5em at 19% 89.7%, color-mix(in srgb, var(--c) 35%, rgb(230 240 255 / 0.75)) 40%, transparent),
radial-gradient(0.06em 1.5em at 94.9% 44.9%, color-mix(in srgb, var(--c) 35%, rgb(230 240 255 / 0.75)) 40%, transparent),
radial-gradient(0.06em 1.5em at 26% 8%, color-mix(in srgb, var(--c) 35%, rgb(230 240 255 / 0.75)) 40%, transparent),
radial-gradient(0.06em 1.5em at 82.8% 52.7%, color-mix(in srgb, var(--c) 35%, rgb(230 240 255 / 0.75)) 40%, transparent),
radial-gradient(0.06em 1.5em at 4.3% 39.9%, color-mix(in srgb, var(--c) 35%, rgb(230 240 255 / 0.75)) 40%, transparent);
}
.bgx-rain i {
position: absolute;
bottom: var(--b);
left: var(--x);
width: 3em;
height: 0.7em;
margin-left: -1.5em;
border: 0.06em solid rgb(200 220 255 / 0.55);
border-radius: 50%;
opacity: 0;
animation: bgx-rain-ripple 1.6s ease-out var(--delay) infinite;
}
.bgx-rain i:nth-of-type(1) { --x: 14%; --b: 6%; --delay: -0.2s; }
.bgx-rain i:nth-of-type(2) { --x: 38%; --b: 12%; --delay: -0.9s; }
.bgx-rain i:nth-of-type(3) { --x: 61%; --b: 4%; --delay: -1.3s; }
.bgx-rain i:nth-of-type(4) { --x: 80%; --b: 10%; --delay: -0.5s; }
.bgx-rain i:nth-of-type(5) { --x: 93%; --b: 3%; --delay: -1.1s; }
@keyframes bgx-rain-fall {
to { transform: translateY(var(--tile)); }
}
@keyframes bgx-rain-ripple {
0% { transform: scale(0.1); opacity: 0.9; }
100% { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-rain, .bgx-rain *, .bgx-rain::before, .bgx-rain::after, .bgx-rain *::before, .bgx-rain *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bgx-coloron the element or a parent. Currently previewing#3b82f6. - Pattern scale: set
--bgx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. 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.