OneTaskBy Tim King · Updated
Snow Effect
Falling Snow Animation for Your Website
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Snow Effect works
A snow effect fills a section with softly falling flakes for a winter sale, a holiday page or a cosy seasonal hero. Choose how much snow falls, how fast, how big and what colour, then copy the HTML, CSS and JavaScript.
Seasonal touches like snow make a page feel current and a little playful. Because the flakes sit on a canvas behind the text, the heading stays readable and every link keeps working.
How the snow effect is drawn
Each flake has a position, a size and a drift phase. Every animation frame it falls a little, with bigger flakes falling faster so the snow has depth, and a sine wave sways it from side to side. When a flake leaves the bottom it jumps back to the top at a new random position, so the snowfall never runs out. Positions are stored as fractions of the section, so resizing the window keeps the flakes spread evenly.
Motion and performance
The canvas is aria-hidden because it is decoration. Visitors who ask for reduced motion see a
still scene of scattered snow instead of falling flakes, and the loop stops when the section is
removed from the page.
FAQ
Can I make it snow over the whole page?
Yes. Give the canvas position: fixed, inset: 0 and pointer-events: none, and size it to the
window. Keep the flake count modest so text stays readable everywhere the snow falls.
Will the snow effect slow my site down?
A few hundred small circles per frame is light work for any modern browser. If you notice it on older phones, lower the number of flakes, which is the main thing that affects the cost.
How do I only show snow in December?
Wrap the script in a date check such as if (new Date().getMonth() === 11) and hide the canvas
otherwise. That way you can leave the code on the site all year without editing it.
Can I use snowflake shapes instead of dots?
Yes. Replace the arc call with ctx.fillText("❄", x, y) after setting a font size based on the
flake radius. Text glyphs are slower than circles, so use fewer flakes with that approach.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Bubble Background
Add see-through bubbles that wobble as they rise.
Starfield Background
Make stars stream past as if flying through space.
Particle Background
Build a drifting network of connected dots, no library.
Confetti Generator
Fire a burst of confetti from a button, no library.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.