Particle Float

<div class="nuda-particle-float" aria-hidden="true"></div>

/* Particle Float
   Floating particles using CSS box-shadows (no JS).
   Customize: colors and shadow positions */

.nuda-particle-float {
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  width: 100%;
  min-height: 300px;
}

.nuda-particle-float::before,
.nuda-particle-float::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  will-change: transform;
}

.nuda-particle-float::before {
  box-shadow:
    20px 30px 0 rgba(99, 102, 241, 0.25),
    80px 60px 0 rgba(236, 72, 153, 0.25),
    140px 20px 0 rgba(6, 182, 212, 0.25),
    200px 80px 0 rgba(245, 158, 11, 0.25),
    50px 120px 0 rgba(34, 197, 94, 0.25),
    160px 140px 0 rgba(139, 92, 246, 0.25),
    30px 180px 0 rgba(99, 102, 241, 0.18),
    110px 200px 0 rgba(236, 72, 153, 0.18),
    180px 170px 0 rgba(6, 182, 212, 0.18),
    240px 220px 0 rgba(245, 158, 11, 0.18);
  animation: nuda-particle-rise1 12s linear infinite;
}

.nuda-particle-float::after {
  box-shadow:
    40px 40px 0 rgba(139, 92, 246, 0.25),
    100px 80px 0 rgba(6, 182, 212, 0.25),
    160px 30px 0 rgba(34, 197, 94, 0.25),
    220px 110px 0 rgba(99, 102, 241, 0.25),
    60px 150px 0 rgba(236, 72, 153, 0.25),
    130px 10px 0 rgba(245, 158, 11, 0.25),
    90px 190px 0 rgba(139, 92, 246, 0.18),
    200px 160px 0 rgba(34, 197, 94, 0.18),
    25px 210px 0 rgba(99, 102, 241, 0.18),
    170px 230px 0 rgba(236, 72, 153, 0.18);
  animation: nuda-particle-rise2 16s linear infinite;
}

@keyframes nuda-particle-rise1 {
  0% { transform: translateY(0); }
  100% { transform: translateY(-300px); }
}

@keyframes nuda-particle-rise2 {
  0% { transform: translateY(0); }
  100% { transform: translateY(-300px) translateX(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-particle-float::before,
  .nuda-particle-float::after {
    animation: none;
  }
}