Glitter Particle Rain — CSS & JavaScript Sparkle Effect

The Glitter Particle Rain creates a continuous shower of shimmering golden sparkle particles falling down the screen. It combines JavaScript DOM manipulation to spawn elements dynamically with CSS @keyframes to handle the falling animation. The result is an atmospheric, ambient effect well-suited for celebration pages, gaming UIs, or festive seasonal themes.

How It Works

A JavaScript setInterval spawns a new .drop element every 35 milliseconds with randomized left position, animation duration, height, and opacity — creating natural visual variety. The CSS @keyframes fall handles the translation from above the viewport to below it with a slight rotation for a more organic look. Each element self-destructs from the DOM after its animation completes via setTimeout.

How to Customize

• Change particle color: Replace #ffd700 (gold) in the .drop CSS background gradient with any hex color
• Change particle density: Lower the setInterval delay (e.g., 20ms) for more particles, higher for fewer
• Change fall speed: Modify the dur random range (Math.random() * 1.2 + 0.7) in JS
• Change angle: Adjust rotate(12deg) in @keyframes fall for different rain angles

Frequently Asked Questions

Does this have performance issues with lots of particles?

Each particle is removed from the DOM immediately after its animation completes, keeping the live node count minimal. The primary cost is setTimeout callbacks and CSS animation work. For more than ~50 simultaneous particles, consider a <canvas> approach instead.

Can I use multiple colors for a rainbow rain effect?

Yes! In the JavaScript, generate a random HSL color: const hue = Math.floor(Math.random() * 360) and set drop.style.background = 'linear-gradient(to bottom, transparent, hsl(' + hue + ', 100%, 60%), transparent)'.

How do I make it snow instead of rain?

Change the shape: set width: 6px; height: 6px; border-radius: 50% on .drop. Change the color to white (#ffffff). Reduce the rotation angle to 0deg and lower the fall speed for a gentle snow effect.