Falling Leaves Background
Autumn leaves drift down a warm backdrop, rocking side to side like a pendulum and flipping over as they fall. The rock is a rotate around a pivot above each leaf, the fall a full-height carrier.
Also known as: autumn leaves animation css, falling leaves css, fall leaves background.
HTML
<div class="bgx-falling-leaves" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
CSS
.bgx-falling-leaves {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background: linear-gradient(to bottom, color-mix(in srgb, var(--c) 8%, #fff8ee), color-mix(in srgb, var(--c) 6%, #fde4c8));}
.bgx-falling-leaves span {
position: absolute;
top: 0;
left: var(--x);
height: 100%;
animation: bgx-falling-leaves-fall var(--dur) linear var(--delay) infinite;
}
.bgx-falling-leaves span::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: var(--s);
height: var(--s);
border-radius: 0 100%;
background:
linear-gradient(to top right, transparent calc(50% - 0.04em), rgb(0 0 0 / 0.2) 0 calc(50% + 0.04em), transparent 0),
var(--k);
transform-origin: 50% -3em;
animation:
bgx-falling-leaves-rock var(--rock) ease-in-out var(--delay) infinite alternate,
bgx-falling-leaves-flip calc(var(--rock) * 1.3) ease-in-out var(--delay) infinite alternate;
}
.bgx-falling-leaves span:nth-child(4n + 1) { --k: color-mix(in oklab, var(--c) 18%, #e4572e); }
.bgx-falling-leaves span:nth-child(4n + 2) { --k: color-mix(in oklab, var(--c) 18%, #f4a340); }
.bgx-falling-leaves span:nth-child(4n + 3) { --k: color-mix(in oklab, var(--c) 18%, #b83b26); }
.bgx-falling-leaves span:nth-child(4n + 4) { --k: color-mix(in oklab, var(--c) 18%, #e3b448); }
.bgx-falling-leaves span:nth-child(1) { --x: 47.6%; --s: 1.45em; --dur: 10.42s; --delay: -4.43s; --rock: 1.39s; }
.bgx-falling-leaves span:nth-child(2) { --x: 59.9%; --s: 1.31em; --dur: 10.77s; --delay: -2.59s; --rock: 2.04s; }
.bgx-falling-leaves span:nth-child(3) { --x: 74%; --s: 1.1em; --dur: 9.38s; --delay: -2.81s; --rock: 2.09s; }
.bgx-falling-leaves span:nth-child(4) { --x: 77.6%; --s: 1.41em; --dur: 8s; --delay: -4.83s; --rock: 1.62s; }
.bgx-falling-leaves span:nth-child(5) { --x: 95.1%; --s: 1.28em; --dur: 8.18s; --delay: -9.24s; --rock: 1.34s; }
.bgx-falling-leaves span:nth-child(6) { --x: 15.8%; --s: 1.48em; --dur: 7.64s; --delay: -6.15s; --rock: 1.31s; }
.bgx-falling-leaves span:nth-child(7) { --x: 84.5%; --s: 1.13em; --dur: 7.86s; --delay: -7.95s; --rock: 1.44s; }
.bgx-falling-leaves span:nth-child(8) { --x: 91.6%; --s: 1.08em; --dur: 8.21s; --delay: -2.78s; --rock: 1.77s; }
.bgx-falling-leaves span:nth-child(9) { --x: 32.7%; --s: 1.15em; --dur: 8.34s; --delay: -1.31s; --rock: 1.78s; }
.bgx-falling-leaves span:nth-child(10) { --x: 19.8%; --s: 1.35em; --dur: 8.71s; --delay: -9.76s; --rock: 1.92s; }
.bgx-falling-leaves span:nth-child(11) { --x: 51.1%; --s: 1.08em; --dur: 10.47s; --delay: -4.52s; --rock: 1.92s; }
.bgx-falling-leaves span:nth-child(12) { --x: 28.9%; --s: 1.35em; --dur: 10.11s; --delay: -2.53s; --rock: 1.84s; }
.bgx-falling-leaves span:nth-child(13) { --x: 42.5%; --s: 1.47em; --dur: 7.28s; --delay: -5.77s; --rock: 1.8s; }
.bgx-falling-leaves span:nth-child(14) { --x: 9.4%; --s: 1.13em; --dur: 10.3s; --delay: -10.1s; --rock: 1.5s; }
.bgx-falling-leaves span:nth-child(15) { --x: 66.6%; --s: 1.26em; --dur: 10.3s; --delay: -9.56s; --rock: 1.42s; }
.bgx-falling-leaves span:nth-child(16) { --x: 1.8%; --s: 1.49em; --dur: 9.38s; --delay: -7.69s; --rock: 1.67s; }
@keyframes bgx-falling-leaves-fall {
from { transform: translateY(-4em); }
to { transform: translateY(100%); }
}
@keyframes bgx-falling-leaves-rock {
from { transform: rotate(-38deg); }
to { transform: rotate(38deg); }
}
@keyframes bgx-falling-leaves-flip {
from { scale: 1 1; }
to { scale: 0.3 1; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-falling-leaves, .bgx-falling-leaves *, .bgx-falling-leaves::before, .bgx-falling-leaves::after, .bgx-falling-leaves *::before, .bgx-falling-leaves *::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.