Floating Lanterns Background
Paper sky lanterns glow and flicker as they drift up into a violet dusk, near ones large and bright, far ones small and dim. A warm radial highlight at the base of each lantern is the flame.
Also known as: sky lanterns css, lantern festival background, floating lights animation css.
HTML
<div class="bgx-floating-lanterns" 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></div>
CSS
.bgx-floating-lanterns {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
--warm: color-mix(in oklab, var(--c) 15%, #ffa53d);
background:
radial-gradient(ellipse 120% 55% at 50% 112%, color-mix(in srgb, var(--warm) 40%, #3a1a3a), transparent 75%),
linear-gradient(to bottom, #070916, color-mix(in srgb, var(--c) 30%, #1b1638) 70%, #2b1a36);}
.bgx-floating-lanterns span {
position: absolute;
top: 0;
left: var(--x);
width: 1em;
height: 100%;
font-size: calc(var(--z) * 1em);
opacity: var(--o);
transform-origin: 50% 100%;
animation:
bgx-floating-lanterns-rise var(--dur) linear var(--delay) infinite,
bgx-floating-lanterns-drift var(--sway) ease-in-out var(--delay) infinite alternate;
}
.bgx-floating-lanterns span::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 1em;
height: 1.3em;
border-radius: 0.3em 0.3em 0.18em 0.18em / 0.4em 0.4em 0.18em 0.18em;
background:
radial-gradient(ellipse 60% 40% at 50% 88%, #fff6d8, transparent),
linear-gradient(to top, color-mix(in srgb, var(--warm), #fff 30%), var(--warm) 45%, color-mix(in srgb, var(--warm), #6b1d00 45%));
box-shadow: 0 0 1.4em 0.3em color-mix(in srgb, var(--warm) 45%, transparent);
animation: bgx-floating-lanterns-flicker var(--fl) ease-in-out infinite alternate;
}
.bgx-floating-lanterns span:nth-child(1) { --x: 23.1%; --z: 1.01; --o: 0.88; --dur: 16.29s; --delay: -14.23s; --sway: 2.91s; --fl: 0.57s; }
.bgx-floating-lanterns span:nth-child(2) { --x: 18.3%; --z: 0.72; --o: 0.77; --dur: 19.86s; --delay: -12.54s; --sway: 3.64s; --fl: 0.86s; }
.bgx-floating-lanterns span:nth-child(3) { --x: 38.7%; --z: 1.25; --o: 0.98; --dur: 14.99s; --delay: -19.53s; --sway: 3.3s; --fl: 0.76s; }
.bgx-floating-lanterns span:nth-child(4) { --x: 59.8%; --z: 1.21; --o: 0.96; --dur: 16.71s; --delay: -14.78s; --sway: 2.75s; --fl: 0.58s; }
.bgx-floating-lanterns span:nth-child(5) { --x: 75.6%; --z: 0.77; --o: 0.79; --dur: 18.54s; --delay: -8.41s; --sway: 4.17s; --fl: 0.77s; }
.bgx-floating-lanterns span:nth-child(6) { --x: 97.6%; --z: 1.21; --o: 0.96; --dur: 14.27s; --delay: -1.52s; --sway: 2.84s; --fl: 0.85s; }
.bgx-floating-lanterns span:nth-child(7) { --x: 91.1%; --z: 0.95; --o: 0.86; --dur: 20.1s; --delay: -14.69s; --sway: 3.5s; --fl: 0.53s; }
.bgx-floating-lanterns span:nth-child(8) { --x: 47.9%; --z: 0.92; --o: 0.85; --dur: 16.61s; --delay: -8.76s; --sway: 3.89s; --fl: 0.43s; }
.bgx-floating-lanterns span:nth-child(9) { --x: 69.5%; --z: 0.68; --o: 0.76; --dur: 21.35s; --delay: -1.9s; --sway: 3.87s; --fl: 0.89s; }
.bgx-floating-lanterns span:nth-child(10) { --x: 11.1%; --z: 1.04; --o: 0.9; --dur: 17.55s; --delay: -15.56s; --sway: 3.51s; --fl: 0.49s; }
.bgx-floating-lanterns span:nth-child(11) { --x: 83.4%; --z: 0.63; --o: 0.74; --dur: 20.37s; --delay: -15.56s; --sway: 3.75s; --fl: 0.46s; }
.bgx-floating-lanterns span:nth-child(12) { --x: 33%; --z: 0.92; --o: 0.85; --dur: 19.49s; --delay: -14.28s; --sway: 3.83s; --fl: 0.6s; }
.bgx-floating-lanterns span:nth-child(13) { --x: 53.4%; --z: 1.06; --o: 0.9; --dur: 17.06s; --delay: -18.51s; --sway: 3.1s; --fl: 0.56s; }
.bgx-floating-lanterns span:nth-child(14) { --x: 4.8%; --z: 1.17; --o: 0.94; --dur: 15.12s; --delay: -4.32s; --sway: 4.15s; --fl: 0.77s; }
@keyframes bgx-floating-lanterns-rise {
from { transform: translateY(2.5em); }
to { transform: translateY(-100%); }
}
@keyframes bgx-floating-lanterns-drift {
from { translate: -0.6em 0; rotate: -5deg; }
to { translate: 0.6em 0; rotate: 5deg; }
}
@keyframes bgx-floating-lanterns-flicker {
from { opacity: 0.78; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-floating-lanterns, .bgx-floating-lanterns *, .bgx-floating-lanterns::before, .bgx-floating-lanterns::after, .bgx-floating-lanterns *::before, .bgx-floating-lanterns *::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.