AI CSS Animations

Floating Particles Background

Specks of dust float up through slanted beams of light in a dim room, glinting as they drift. The motes ride full-height carriers, and the beams sway and breathe on one layer.

Also known as: particles background css, floating dust particles css, moving particles background css.

HTML

<div class="bgx-floating-particles" aria-hidden="true"><div class="bgx-floating-particles-motes"><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><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></div>

CSS

.bgx-floating-particles {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --beam: color-mix(in srgb, var(--c) 30%, #fff1d0);
  background: linear-gradient(160deg, #1d1712, #0e0b09 55%, color-mix(in srgb, var(--c) 20%, #0e0b0a));}
.bgx-floating-particles::before {
  content: "";
  position: absolute;
  inset: -10% -25%;
  background:
    linear-gradient(112deg, transparent 16%, color-mix(in srgb, var(--beam) 36%, transparent) 25%, transparent 34%),
    linear-gradient(112deg, transparent 39%, color-mix(in srgb, var(--beam) 28%, transparent) 47%, transparent 57%),
    linear-gradient(112deg, transparent 61%, color-mix(in srgb, var(--beam) 22%, transparent) 66%, transparent 73%);
  mask: linear-gradient(to bottom, #000 10%, transparent 95%);
  animation: bgx-floating-particles-beams 7s ease-in-out infinite alternate;
}
.bgx-floating-particles-motes {
  position: absolute;
  inset: -10% -25%;
  mask: linear-gradient(112deg, rgb(0 0 0 / 0.2) 16%, #000 25%, rgb(0 0 0 / 0.2) 34% 39%, #000 47%, rgb(0 0 0 / 0.2) 57% 61%, #000 66%, rgb(0 0 0 / 0.2) 73%);
}
.bgx-floating-particles span {
  position: absolute;
  top: 0;
  left: calc(var(--x) * 0.67 + 16.5%);
  height: 100%;
  animation: bgx-floating-particles-rise var(--dur) linear var(--delay) infinite;
}
.bgx-floating-particles span::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--beam);
  box-shadow: 0 0 calc(var(--s) * 2.5) color-mix(in srgb, var(--beam) 70%, transparent);
  animation:
    bgx-floating-particles-float var(--sway) ease-in-out var(--delay) infinite alternate,
    bgx-floating-particles-glint var(--glint) ease-in-out var(--delay) infinite;
}
.bgx-floating-particles span:nth-child(1) { --x: 95.1%; --s: 0.23em; --dur: 18.77s; --delay: -5.02s; --sway: 3.84s; --glint: 3.44s; }
.bgx-floating-particles span:nth-child(2) { --x: 51.2%; --s: 0.45em; --dur: 17.26s; --delay: -4.76s; --sway: 4.61s; --glint: 2.48s; }
.bgx-floating-particles span:nth-child(3) { --x: 31.7%; --s: 0.42em; --dur: 21.18s; --delay: -14.35s; --sway: 3.89s; --glint: 4.09s; }
.bgx-floating-particles span:nth-child(4) { --x: 77.3%; --s: 0.26em; --dur: 20.46s; --delay: -11.71s; --sway: 2.71s; --glint: 2.95s; }
.bgx-floating-particles span:nth-child(5) { --x: 15.5%; --s: 0.33em; --dur: 13.35s; --delay: -17.97s; --sway: 4.4s; --glint: 4.8s; }
.bgx-floating-particles span:nth-child(6) { --x: 74%; --s: 0.19em; --dur: 16s; --delay: -16.33s; --sway: 3.96s; --glint: 3.03s; }
.bgx-floating-particles span:nth-child(7) { --x: 44.5%; --s: 0.47em; --dur: 12.56s; --delay: -13.31s; --sway: 4.53s; --glint: 3.92s; }
.bgx-floating-particles span:nth-child(8) { --x: 4.9%; --s: 0.22em; --dur: 20.5s; --delay: -9.23s; --sway: 3.77s; --glint: 2.77s; }
.bgx-floating-particles span:nth-child(9) { --x: 42.8%; --s: 0.34em; --dur: 14.71s; --delay: -16.18s; --sway: 5.34s; --glint: 2.47s; }
.bgx-floating-particles span:nth-child(10) { --x: 67.2%; --s: 0.41em; --dur: 14.79s; --delay: -11.19s; --sway: 3.57s; --glint: 4.68s; }
.bgx-floating-particles span:nth-child(11) { --x: 39.1%; --s: 0.3em; --dur: 21.58s; --delay: -18.74s; --sway: 2.92s; --glint: 3.89s; }
.bgx-floating-particles span:nth-child(12) { --x: 71.3%; --s: 0.18em; --dur: 16.61s; --delay: -13.07s; --sway: 4.49s; --glint: 4.77s; }
.bgx-floating-particles span:nth-child(13) { --x: 54.1%; --s: 0.23em; --dur: 16.87s; --delay: -12.99s; --sway: 4.78s; --glint: 4.04s; }
.bgx-floating-particles span:nth-child(14) { --x: 88.5%; --s: 0.29em; --dur: 13.98s; --delay: -2.57s; --sway: 5.23s; --glint: 3.09s; }
.bgx-floating-particles span:nth-child(15) { --x: 57.8%; --s: 0.28em; --dur: 17.66s; --delay: -17.46s; --sway: 3.51s; --glint: 2.68s; }
.bgx-floating-particles span:nth-child(16) { --x: 92.7%; --s: 0.21em; --dur: 18.43s; --delay: -13.13s; --sway: 3.83s; --glint: 3.05s; }
.bgx-floating-particles span:nth-child(17) { --x: 81.1%; --s: 0.37em; --dur: 19.42s; --delay: -21.96s; --sway: 3.07s; --glint: 3.53s; }
.bgx-floating-particles span:nth-child(18) { --x: 62.3%; --s: 0.46em; --dur: 17.88s; --delay: -17.1s; --sway: 2.97s; --glint: 3.35s; }
.bgx-floating-particles span:nth-child(19) { --x: 64.7%; --s: 0.44em; --dur: 14.7s; --delay: -9.5s; --sway: 2.88s; --glint: 4.02s; }
.bgx-floating-particles span:nth-child(20) { --x: 21.6%; --s: 0.38em; --dur: 15.45s; --delay: -4.89s; --sway: 3.74s; --glint: 2.52s; }
.bgx-floating-particles span:nth-child(21) { --x: 84.3%; --s: 0.28em; --dur: 14.58s; --delay: -1.76s; --sway: 4.76s; --glint: 3.59s; }
.bgx-floating-particles span:nth-child(22) { --x: 11%; --s: 0.24em; --dur: 17.99s; --delay: -15.51s; --sway: 4.93s; --glint: 2.96s; }
.bgx-floating-particles span:nth-child(23) { --x: 9.1%; --s: 0.32em; --dur: 16.47s; --delay: -14.23s; --sway: 3.8s; --glint: 4.62s; }
.bgx-floating-particles span:nth-child(24) { --x: 27.8%; --s: 0.34em; --dur: 18.52s; --delay: -2.34s; --sway: 3.23s; --glint: 3.03s; }
.bgx-floating-particles span:nth-child(25) { --x: 47.8%; --s: 0.22em; --dur: 19.02s; --delay: -7.89s; --sway: 5.16s; --glint: 4.54s; }
.bgx-floating-particles span:nth-child(26) { --x: 98.6%; --s: 0.35em; --dur: 12.08s; --delay: -21.56s; --sway: 3.71s; --glint: 4.03s; }
.bgx-floating-particles span:nth-child(27) { --x: 25.8%; --s: 0.25em; --dur: 20.75s; --delay: -17.05s; --sway: 3.43s; --glint: 4.34s; }
.bgx-floating-particles span:nth-child(28) { --x: 35.4%; --s: 0.32em; --dur: 18.95s; --delay: -9.08s; --sway: 5.46s; --glint: 2.97s; }
.bgx-floating-particles span:nth-child(29) { --x: 19.3%; --s: 0.31em; --dur: 13.15s; --delay: -2.36s; --sway: 4.72s; --glint: 3.33s; }
.bgx-floating-particles span:nth-child(30) { --x: 2.7%; --s: 0.3em; --dur: 17.74s; --delay: -20.85s; --sway: 3.62s; --glint: 3.75s; }
@keyframes bgx-floating-particles-rise {
  from { transform: translateY(1em); }
  to   { transform: translateY(-100%); }
}
@keyframes bgx-floating-particles-float {
  from { translate: -1.2em 0; }
  to   { translate: 1.2em 0; }
}
@keyframes bgx-floating-particles-glint {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
@keyframes bgx-floating-particles-beams {
  from { opacity: 0.7; transform: translateX(-0.6em); }
  to   { opacity: 1; transform: translateX(0.6em); }
}

@media (prefers-reduced-motion: reduce) {
  .bgx-floating-particles, .bgx-floating-particles *, .bgx-floating-particles::before, .bgx-floating-particles::after, .bgx-floating-particles *::before, .bgx-floating-particles *::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