sparklefall/dist/sparklefall.css

Beautiful, customizable falling sparkle animations for your website. Zero dependencies, easy to use.

/* SparkleFall default styles */
.sparklefall-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 100;
}

.sparklefall-sparkle {
  position: absolute;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

@keyframes sparklefall-drop {
  to {
    transform: translateY(110vh) translateX(var(--wind-offset)) rotate(var(--rotation));
    opacity: 0;
  }
}

@keyframes sparklefall-drop-no-spin {
  to {
    transform: translateY(110vh) translateX(var(--wind-offset));
    opacity: 0;
  }
}