Floating Balloons Background
Glossy party balloons on strings float up a soft sky in five hues, the far ones smaller and slower, each tilting as it drifts. Sizes scale per balloon with font-size, so one set of rules draws all.
Also known as: balloons animation css, birthday background css, party balloons background.
HTML
<div class="bgx-floating-balloons" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
CSS
.bgx-floating-balloons {
--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) 30%, #fff), color-mix(in srgb, var(--c) 7%, #fff));}
.bgx-floating-balloons span {
position: absolute;
top: 0;
left: var(--x);
width: 2em;
height: 100%;
font-size: calc(var(--z) * 1em);
transform-origin: 50% 100%;
animation:
bgx-floating-balloons-rise var(--dur) linear var(--delay) infinite,
bgx-floating-balloons-tilt var(--sway) ease-in-out var(--delay) infinite alternate;
}
.bgx-floating-balloons span::before {
content: "";
position: absolute;
bottom: 3em;
left: 0;
width: 2em;
height: 2.5em;
border-radius: 50% 50% 50% 50% / 42% 42% 58% 58%;
background:
radial-gradient(circle at 34% 28%, rgb(255 255 255 / 0.75) 0 7%, transparent 22%),
radial-gradient(circle at 40% 35%, transparent 45%, rgb(0 0 0 / 0.14)),
var(--k);
}
.bgx-floating-balloons span::after {
content: "";
position: absolute;
bottom: 0;
left: 0.82em;
width: 0.36em;
height: 3.1em;
background:
linear-gradient(var(--k), var(--k)) top / 0.3em 0.22em no-repeat,
linear-gradient(to right, transparent calc(50% - 0.03em), color-mix(in srgb, var(--c) 30%, rgb(0 0 0 / 0.35)) 0 calc(50% + 0.03em), transparent 0);
}
.bgx-floating-balloons span:nth-child(5n + 1) { --k: var(--c); }
.bgx-floating-balloons span:nth-child(5n + 2) { --k: oklch(from var(--c) 0.7 0.2 calc(h + 150)); }
.bgx-floating-balloons span:nth-child(5n + 3) { --k: oklch(from var(--c) 0.84 0.15 calc(h - 160)); }
.bgx-floating-balloons span:nth-child(5n + 4) { --k: oklch(from var(--c) 0.66 0.2 calc(h + 80)); }
.bgx-floating-balloons span:nth-child(5n + 5) { --k: oklch(from var(--c) 0.82 0.13 calc(h - 70)); }
.bgx-floating-balloons span:nth-child(1) { --x: 36%; --z: 0.97; --dur: 13.43s; --delay: -7.02s; --sway: 3.07s; }
.bgx-floating-balloons span:nth-child(2) { --x: 11.7%; --z: 1.02; --dur: 11.74s; --delay: -2.28s; --sway: 3.11s; }
.bgx-floating-balloons span:nth-child(3) { --x: 57%; --z: 0.72; --dur: 16.51s; --delay: -7.03s; --sway: 2.68s; }
.bgx-floating-balloons span:nth-child(4) { --x: 96.9%; --z: 0.59; --dur: 17.65s; --delay: -10.52s; --sway: 3.34s; }
.bgx-floating-balloons span:nth-child(5) { --x: 71.7%; --z: 0.99; --dur: 10.85s; --delay: -10.49s; --sway: 2.51s; }
.bgx-floating-balloons span:nth-child(6) { --x: 47.4%; --z: 0.68; --dur: 16.35s; --delay: -7.72s; --sway: 2.72s; }
.bgx-floating-balloons span:nth-child(7) { --x: 66.1%; --z: 0.78; --dur: 13.13s; --delay: -0.95s; --sway: 3.04s; }
.bgx-floating-balloons span:nth-child(8) { --x: 22%; --z: 0.78; --dur: 14.31s; --delay: -8.44s; --sway: 2.95s; }
.bgx-floating-balloons span:nth-child(9) { --x: 85.9%; --z: 0.76; --dur: 13.81s; --delay: -11.4s; --sway: 2.37s; }
.bgx-floating-balloons span:nth-child(10) { --x: 8.2%; --z: 0.98; --dur: 12.57s; --delay: -3.38s; --sway: 2.73s; }
@keyframes bgx-floating-balloons-rise {
from { transform: translateY(5.6em); }
to { transform: translateY(-100%); }
}
@keyframes bgx-floating-balloons-tilt {
from { rotate: -7deg; translate: -0.5em 0; }
to { rotate: 7deg; translate: 0.5em 0; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-floating-balloons, .bgx-floating-balloons *, .bgx-floating-balloons::before, .bgx-floating-balloons::after, .bgx-floating-balloons *::before, .bgx-floating-balloons *::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.