SOURCE

.container
  .stars
    - for (i = 0; i < 300; i++)
      .star
  .milky-way
    - for (i = 0; i < 300; i++)
      .star

$COLOR_WHITE: #fff;
$COLOR_SKY_TOP: #060431;
$COLOR_SKY_BOTTOM: #406178;

.container {
  position: relative;
  top: calc(50% - 250px);
  left: calc(50% - 250px);
  width: 500px;
  height: 500px;
  border-radius: 50%;
  overflow: hidden;
  background: $COLOR_SKY_TOP;
  background: -webkit-linear-gradient(
    to bottom,
    $COLOR_SKY_TOP,
    $COLOR_SKY_BOTTOM
  );
  background: linear-gradient(to bottom, $COLOR_SKY_TOP, $COLOR_SKY_BOTTOM);
}

.stars {
  position: relative;
  width: 100%;
  height: 100%;
}

.star {
  position: absolute;
  top: 50%;
  left: 50%;
  background: $COLOR_WHITE;
  border-radius: 50%;
  @for $i from 1 through 300 {
    &:nth-child(#{$i}) {
      $size: random(3);
      top: calc(50% - #{random(500) - 250px});
      left: calc(50% - #{random(500) - 250px});
      box-shadow: 0 0 20px 10px rgba($COLOR_SKY_TOP, 0.3);
      width: $size + px;
      height: $size + px;
      @if $i > 150 {
        box-shadow: 0 0 20px 5px rgba($COLOR_SKY_BOTTOM, 0.3);
      }
      @if $i % 10 == 0 {
        animation: star #{random(3)}s #{random(3)}s alternate infinite;
        box-shadow: 0 0 10px 5px rgba($COLOR_WHITE, 0.3);
      }
    }
  }
}

@keyframes star {
  0% {
    box-shadow: 0 0 10px 5px rgba($COLOR_WHITE, 0.3);
  }
  100% {
    box-shadow: 0 0 20px 5px rgba($COLOR_WHITE, 0.3);
  }
}

.milky-way {
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  height: 200px;
  transform: rotate(20deg);

  .star {
    @for $i from 1 through 300 {
      &:nth-child(#{$i}) {
        $size: random(3);
        $shadowSize: calc(#{random(10) + 2px});
        top: calc(50% - #{random(200) - 100px});
        left: calc(50% - #{random(500) - 250px});
        box-shadow: 0
          0
          20px
          $shadowSize
          rgba(random(255), random(140), 255, 0.8);
        width: $size + px;
        height: $size + px;
        @if $i > 125 {
          box-shadow: 0 0 20px 5px rgba($COLOR_SKY_TOP, 0.3);
        }
      }
    }
  }
}

html,
body {
  width: 100%;
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
  &:before,
  &:after {
    content: "";
    position: absolute;
  }
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  background: $COLOR_WHITE;
}