- 100.times do
  %div
View Compiled
$divs: 100;
$randomMax: 100;
$color: skyblue;
$colorvary: 3;

body {
  background: #000;
  overflow: hidden;
  padding: 0;
  margin: 0;
  
}

div {
  position: absolute;
  width: 5vw;
  height: 2px;
  animation: fall 4s infinite;
  top: -1vh;
}


@for $i from 1 to $divs {
  
  div:nth-child(#{$i}) {
    left: $i - 1 + vw;
    box-shadow: 0 -20px 20px adjust-hue($color, $colorvary*$i);
    animation-delay: random(1000) * .01 + s;
  }
  
}

@keyframes fall {
  90% {
    height: 103vh;
    opacity: 1;
  }
  
  100% {
    height: 103vh;
    opacity: 0;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.