Collection of free HTML and pure CSS snow code examples from Codepen, GitHub and other resources. Update of April 2021 collection. 5 new items.

Author

  • Calle

Links

Made with

  • HTML / CSS

About a code

Snow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Alvaro Montoro

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Snowfall Animation

Snowfall animation in HTML and CSS (using Pug and SCSS respectively for simplicity).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Paper Snowflakes

Author

  • Michelle Barker

Links

Made with

  • HTML / CSS (SCSS)

About a code

CSS Paper Snowflakes

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • @BrawadaCom

Links

Made with

  • HTML (Haml) / CSS (Sass)

About a code

Snow SVG Animate

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Aybüke Ceylan

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Snowy Day - Pure CSS Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • alphardex

Links

Made with

  • HTML / CSS (SCSS)

About a code

Snow

Pure CSS snow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Red Stapler

Links

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Snow

Pure CSS snow fall effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Scott Kellum

Links

Made with

  • HTML / CSS (SCSS)

About a code

Let it <marquee>snow</marquee>

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Lavi Perchik

Links

Made with

  • HTML / CSS (SCSS)

About a code

CSS Snow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Kyoya Baba

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

HTML and CSS Snow Falling

Snows with HTML and random animations with SCSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • codeconvey

Links

Made with

  • HTML / CSS

About a code

CSS Snow Animation Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Irem Lopsum

Links

Made with

  • HTML / CSS (SCSS)

About a code

Snowfall

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Kyle McCormick

Links

Made with

  • HTML (Haml) / CSS (Sass)

About a code

CSS Snow Cloud

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jason Hibbs

Links

Made with

  • HTML (Markdown) / CSS (Less)

About a code

Let it Snow

Here we’re animating two backgrounds of highly compressed images at slightly different speed to create the illusion of depth (otherwise known as a parallax effect), and illustrate a gentle snowfall.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Keith Clark

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

One Element CSS Snow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Emmanuel Pilande

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Pure CSS Snow

Happy Holidays!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Raphael

Links

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

Winter Is Coming

Pure CSS snow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -