Ajouter

Lorem ipsum

Lorem ipsum

Easter egg

16 views

3 min

How to Add Snow or Confetti as a Background in Webflow

Learn how to add a continuous snow or confetti effect in the background in Webflow with JavaScript.

In this tutorial, Sandro, co-founder of the Gemeos Webflow agency, shows you how to add a continuous snow or confetti effect in the background in Webflow.

ParameterValueDescription
COUNT80Number of flakes
CHARCharacter (❄, ⭐, 🎉, ✨...)
SIZE_MIN / SIZE_MAX10 / 24Min/max size in px
SPEED_MIN / SPEED_MAX1 / 3Fall speed

The script

Paste this script into the Footer code field. Change CHAR to match the effect to the season.

(function() {
var COUNT = 80, CHAR = '❄';
var SIZE_MIN = 10, SIZE_MAX = 24, SPEED_MIN = 1, SPEED_MAX = 3;
var styleEl = document.createElement('style');
styleEl.textContent = '@keyframes snowfall { from { transform: translateY(-50px) rotate(0deg); } to { transform: translateY(110vh) rotate(360deg); } }';
document.head.appendChild(styleEl);
for (var i = 0; i < COUNT; i++) {
(function() {
var el = document.createElement('div');
var size = SIZE_MIN + Math.random() * (SIZE_MAX - SIZE_MIN);
var left = Math.random() * 100;
var delay = Math.random() * 10;
var duration = SPEED_MIN + Math.random() * (SPEED_MAX - SPEED_MIN) + 5;
el.textContent = CHAR;
el.style.cssText = 'position:fixed;top:-50px;left:'+left+'%;font-size:'+size+'px;pointer-events:none;z-index:9999;'
+ 'animation:snowfall '+duration+'s '+delay+'s linear infinite;opacity:0.8;';
document.body.appendChild(el);
})();
}
})();

good to know

Change CHAR to '🎉' for confetti, '⭐' for stars, or '🍂' for autumn leaves. Add a condition based on the date: if (new Date().getMonth() === 11) { /* December only */ } for an automatic seasonal effect.

Conclusion

A seasonal effect that gives a website a visual refresh at key moments.

Published on

You might be interested in these tutorials

Similar tutorials

SEO / GEO

5 min read

5 views

How to Set Up a Redirect in Webflow? (2026)

Updated on 19.12.2025 by Sandro DA SILVA

SEO / GEO

5 min read

5 views

Add structured data to your Webflow site?

Updated on 21.08.2025 by Sandro DA SILVA

No-code

5 min read

5 views

How to Obfuscate a Link in Webflow

Updated on 23.04.2025 by Sandro DA SILVA

Let’s f*****G GO !!

Ready to launch
Your business?

Alexandre

Max

Enora

Bryan

Cannelle

Tiphaine

You'll :heart: our collaboration...