<div></div>
$snowFlakes: 50

$background_list: null
$animation_list: null

@for $i from 1 through $snowFlakes
  $size: random(10)/8
  $background_string: radial-gradient(circle farthest-side, white 99.9%, transparent 0) var(--snowX#{$i}) var(--snowY#{$i}) / #{$size}vw #{$size}vw
  $background_list: append($background_list, $background_string, comma)
  $animation_string: snowFall#{$i} #{random(8)+5}s -#{random(10)}s
  $animation_list: append($animation_list, $animation_string, comma)
  @property --snowX#{$i}
    syntax: '<length>'
    inherits: false
    initial-value: 0vmin
  @property --snowY#{$i}
    syntax: '<length>'
    inherits: false
    initial-value: 0vmin
  @keyframes snowFall#{$i}
    $x: random(100)
    0%
      --snowX#{$i}: #{$x}vw
      --snowY#{$i}: -5vh
    100%
      --snowX#{$i}: #{$x + random(20) - 10}vw
      --snowY#{$i}: calc(100vh - #{$size/2}vw)
body
  background: #369
  overflow: hidden

div, div::before
  @for $i from 1 through $snowFlakes
    --snowX#{$i}: #{random(100)}vw
    --snowY#{$i}: #{random(100)}vh
  content: ""
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  width: 100vw
  height: 100vh
  background: $background_list
  background-repeat: no-repeat
  animation: $animation_list
  animation-iteration-count: infinite
  animation-timing-function: linear
  
div::before
  animation-iteration-count: 1
  animation-fill-mode: forwards
  
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.