Add

Lorem ipsum

Lorem ipsum

A
A
A
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.

Good to know

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

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...