Skip to content
SNOW SIMULATOR! [html css only]
Coder100
Coder100
Made with
HTML, CSS, JS
HTML, CSS, JS
Published on Dec 11, 2021
  • #html
  • #css3
  • #animation
  • #Simulation

View beautiful and satisfying snow as it falls onto the ground. Does it snow in your region? Don't forget to heart!

17comments
BooyaBjornenOff
BooyaBjornenOff
3 weeks ago

cool

bazookaNuke
bazookaNuke
1 month ago

Wow cool!

canary0098
canary0098
3 months ago

nice I guess (I actually fell asleep)

CoderGautamYT
CoderGautamYT
7 months ago

css.js?! very sus

VulcanWM
VulcanWM
7 months ago

This is amazing! Really satisfying!

sn236
sn236
7 months ago

Nice, but it's not made purely in html and css, it uses svg too, but I like the glow that you added to the snowball and it must have taken a lot of time to animate them and did you use js for the calculations of the delay because you haven't linked it. And it doesn't snow in my region. :(

Coder100
Coder100
shared an update7 months ago
[CSS] Falling Snow Animation!Post
Falling Snow!

For Christmas, I made a snow simulator!

Here's what the end result looks like: image

Links

Code -> https://replit.com/@Coder100/SNOW-SIMULATOR-html-css-only Website -> https://SNOW-SIMULATOR-html-css-only.coder100.repl.co Tweet -> https://twitter.com/Coder1002/status/1469515909526085638

About

I wanted to try out my skills at making things with only CSS and HTML!

Every snowflake is actually a div, there's 150 of them! Then, they are animated with CSS using css animations!! How are these css animations made? They are made with a program I used to create random numbers!

Results

For best results, and due to the delay in animations, wait 5 seconds and you will see the best snowfall!

Randomness

Due to CSS being unchanging, the numbers will all be the same and the animation should be the same regardless of the device you are in, you can resize the website to see different results!

Closing

I hope you have a great day! Don't forget to heart!