.svg "Full logo padding (2)")
It’s that time of year again. Mariah Carey has defrosted, every advert features a piano, and half the internet suddenly decides it needs falling snow on its homepage.
If you want to join in the seasonal chaos without completely wrecking your page load speed, here’s a tiny, lightweight snow effect you can drop into Google Tag Manager. It’s festive, subtle and won’t set your Core Web Vitals on fire.
You’re welcome, Santa 🎅
Why This Snow Script Exists (And Why It Won’t Ruin Your Site)
Most snow scripts online were clearly written by someone who hates performance budgets and wants your CPU to cry. This one, however, is:
• Light enough to run on a toaster
• Friendly to GTM
• Written in ES5 because GTM thinks the year is 2012
• Browser-safe
• Easy to bin in January when you’ve had enough
It also includes some high-class festive behaviour:
• Snowflakes that drift like they’ve had too much mulled wine
• Tasteful grey and white shading (because we’re not barbarians)
• Falling flakes that pile up at the bottom like a badly planned office party
• Automatic December activation because let’s not be too jolly
Your Copy-and-Paste GTM Code Snippet
Here is the full code you can paste straight into a Custom HTML Tag in GTM.
Add a trigger, publish, and pretend you’re the digital equivalent of Buddy the Elf.
<style>
.snowflake {
position: fixed;
top: -20px;
pointer-events: none;
z-index: 999999;
user-select: none;
opacity: 0.85;
}
#snowPileContainer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 999998;
pointer-events: none;
}
.pileflake {
position: absolute;
bottom: 0;
pointer-events: none;
user-select: none;
opacity: 0.9;
}
</style>
<script>
(function () {
// Only run in December, obviously
var now = new Date();
if (now.getMonth() !== 11) return;
var flakeCount = 35;
var pileContainer = document.createElement("div");
pileContainer.id = "snowPileContainer";
document.body.appendChild(pileContainer);
function randomGrey() {
var shade = 230 + Math.floor(Math.random() * 25);
return "rgb(" + shade + "," + shade + "," + shade + ")";
}
function createFlake() {
var flake = document.createElement("div");
flake.className = "snowflake";
flake.textContent = "•";
// Festive thicc flakes
var size = 16 + Math.random() * 20;
flake.style.fontSize = size + "px";
flake.style.left = Math.random() * window.innerWidth + "px";
flake.style.color = randomGrey();
var fallDuration = 5 + Math.random() * 5;
var driftAmplitude = 20 + Math.random() * 20;
var driftSpeed = 2 + Math.random() * 2;
var start = Date.now();
function animate() {
var elapsed = (Date.now() - start) / 1000;
var y = elapsed * (window.innerHeight / fallDuration);
var xOffset = Math.sin(elapsed * driftSpeed) * driftAmplitude;
flake.style.transform = "translate(" + xOffset + "px," + y + "px)";
if (y > window.innerHeight) {
addToPile(flake.style.left, size, flake.style.color);
flake.parentNode.removeChild(flake);
createFlake();
return;
}
requestAnimationFrame(animate);
}
document.body.appendChild(flake);
requestAnimationFrame(animate);
}
function addToPile(left, size, colour) {
var pileFlake = document.createElement("div");
pileFlake.className = "pileflake";
pileFlake.textContent = "•";
pileFlake.style.fontSize = size + "px";
pileFlake.style.left = left;
pileFlake.style.color = colour;
// Because even snow deserves a jaunty angle
var rotate = Math.floor(Math.random() * 30) * (Math.random() > 0.5 ? 1 : -1);
pileFlake.style.transform = "rotate(" + rotate + "deg)";
pileContainer.appendChild(pileFlake);
}
var i;
for (i = 0; i < flakeCount; i++) {
createFlake();
}
})();
</script>
How to Install It in GTM (Before the office shuts for Christmas)
- Create a Custom HTML Tag. Call it something festive like “Snow Script” or something realistic like “I’ll delete this in January”.
- Paste the snippet above.
- Trigger on All Pages or just the homepage if you want to look slightly less chaotic.
- Hit publish. Bask in holiday glory.
Shareable Prompt For Others (Because You're Now the IT Santa)
If you want someone else to regenerate or customise the script in their own ChatGPT account, send them this:
Snow Script Prompt for ChatGPT
I want you to generate a lightweight snow effect script that I can inject into a website using Google Tag Manager. Please follow these requirements exactly.
-
The script must be written in ES5 only with no ES6 features. No arrow functions, no template literals, no let or const.
-
The script must run only in December by checking the JavaScript date.
-
Snowflakes should be text based, like a bullet or dot.
-
Snowflakes must drift side to side as they fall.
-
Snowflakes must use random sizes between 16px and 36px.
-
Snowflakes should use random colours that are shades of white and light grey only.
-
When a snowflake reaches the bottom of the screen, it should be added to a pile that collects along the bottom.
-
The script must be as lightweight and low-risk as possible with no external libraries or images.
-
It must work inside a Google Tag Manager Custom HTML tag.
-
Include the required CSS inside the HTML snippet.
Produce the final output as a single Custom HTML tag that I can paste directly into GTM.
Final Note of Festive Sarcasm
Come January, you’ll absolutely forget you added this, someone will Slack you “why is there still snow on the site”, and you will momentarily question your career choices.
Until then, enjoy your beautifully inefficient seasonal decoration.
