Download our Free HTML Cheat Sheet - Quick Reference for Beginners

Snowy images code generator

Use our snow generator to create amazing snow scenes. If the image you want to use is available on the internet, you can see exactly how your snow image will look. Otherwise, use our images to define the paramaters and enter the image URL with yours just before you generate the code.

Images courtesy of the wonderful team at Unsplash
Change sample image:


Image details

Image URL:
Container width:
Container height:
Repeat the image if the container is bigger:
Border style:

Snow settings

Amount of snow:
Speed of falling snow:

Code options

Choose how you want the code created
CSS layout:
Unsure? Leave it inline

Frequently asked questions

Will this work with my own image?

Yes - enter the full URL (including https://) of any image you have permission to use, and the preview above will update to show real falling snow over it. If the URL doesn't start with http, a placeholder is shown instead so you can still see the effect while you finish setting things up.

Why does the snow use a <canvas> instead of an image or GIF?

A canvas animation is far lighter than an animated GIF of the same quality, is crisp on retina/high-DPI screens, and lets you control speed and density with plain numbers instead of re-exporting a new image file every time you want to tweak it.

Will this slow down my page?

It's lightweight for typical settings, but very high snow amounts on a large canvas do add up - if you notice lag, try a lower "amount of snow" setting or a smaller container width/height.

Can I use this for other seasonal effects, not just Christmas?

The falling animation itself is just white dots, so it works for anything snow-like year-round - a winter sale banner, a "cool/chill" themed promotion, or any wintery scene image, not only festive pages.