Skip to content

Easter egg3 min read

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
CHAR❄Character (❄, ⭐, 🎉, ✨...)
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);
    })();
  }
})();

Conclusion

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

Published on May 19, 2026

Sandro DA SILVA

Growth Marketer, Webflow expert, and jack-of-all-trades. Sandro handles commercial operations, ensures projects run smoothly, and addresses marketing-related issues (SEO, Tracking, Copywriting, etc).

You're going to working with us, guaranteed

Ready to launch your business?

get a quote

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