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.
| Parameter | Value | Description |
|---|---|---|
| COUNT | 80 | Number of flakes |
| CHAR | ❄ | Character (❄, ⭐, 🎉, ✨...) |
| SIZE_MIN / SIZE_MAX | 10 / 24 | Min/max size in px |
| SPEED_MIN / SPEED_MAX | 1 / 3 | Fall 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);
})();
}
})();Conclusion
A seasonal effect that gives a website a visual refresh at key moments.
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.














