How to generate night sky with css only

Back>

Example

proof of no overlapping (but still may have adjacent) stars

dynamic css code

@import compass


// n is number of stars required
@function multiple-box-shadow ($n)
  $value: '#{random(500)}px #{random(300)}px #FFF'
  @for $i from 2 through $n
    $value: '#{$value} , #{random(500)}px #{random(300)}px #FFF'

  @return unquote($value)

$shadows-small:  multiple-box-shadow(70)
$shadows-medium: multiple-box-shadow(20)
$shadows-big:    multiple-box-shadow(10)

#stage
  width: 500px
  height: 300px
  background: black
  overflow: hidden
 
#stars
  width: 1px
  height: 1px
  background: transparent
  box-shadow: $shadows-small

 
#stars2
  width: 2px
  height: 2px
  background: transparent
  box-shadow: $shadows-medium

 
#stars3
  width: 3px
  height: 3px
  background: transparent
  box-shadow: $shadows-big

complete source code

<div id='stage'>
<div id='stars'></div>
<div id='stars2'></div>
<div id='stars3'></div>
</div>

<style>
#stage {
  width: 500px;
  height: 300px;
  background: black;
  overflow: hidden;
}

#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 480px 167px #FFF , 163px 26px #FFF , 470px 193px #FFF , 245px 150px #FFF , 52px 227px #FFF , 334px 11px #FFF , 263px 62px #FFF , 27px 111px #FFF , 196px 227px #FFF , 9px 61px #FFF , 120px 288px #FFF , 179px 72px #FFF , 306px 120px #FFF , 338px 87px #FFF , 94px 48px #FFF , 392px 163px #FFF , 196px 216px #FFF , 288px 35px #FFF , 363px 128px #FFF , 416px 165px #FFF , 222px 133px #FFF , 102px 222px #FFF , 345px 236px #FFF , 478px 292px #FFF , 208px 287px #FFF , 473px 91px #FFF , 467px 212px #FFF , 176px 30px #FFF , 440px 228px #FFF , 46px 266px #FFF , 276px 184px #FFF , 277px 164px #FFF , 161px 252px #FFF , 164px 257px #FFF , 329px 250px #FFF , 69px 265px #FFF , 230px 253px #FFF , 310px 182px #FFF , 274px 186px #FFF , 295px 75px #FFF , 12px 216px #FFF , 406px 141px #FFF , 285px 234px #FFF , 372px 85px #FFF , 28px 73px #FFF , 265px 166px #FFF , 193px 197px #FFF , 373px 77px #FFF , 423px 104px #FFF , 247px 201px #FFF , 384px 44px #FFF , 423px 270px #FFF , 466px 212px #FFF , 210px 9px #FFF , 496px 60px #FFF , 149px 233px #FFF , 487px 104px #FFF , 432px 291px #FFF , 50px 50px #FFF , 280px 33px #FFF , 326px 17px #FFF , 1px 183px #FFF , 309px 231px #FFF , 137px 79px #FFF , 306px 125px #FFF , 149px 105px #FFF , 423px 206px #FFF , 287px 209px #FFF , 8px 178px #FFF , 315px 177px #FFF;
}

#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 59px 266px #FFF , 386px 1px #FFF , 139px 192px #FFF , 495px 100px #FFF , 106px 277px #FFF , 351px 47px #FFF , 204px 152px #FFF , 74px 71px #FFF , 210px 261px #FFF , 43px 204px #FFF , 228px 174px #FFF , 347px 73px #FFF , 266px 252px #FFF , 249px 63px #FFF , 258px 154px #FFF , 41px 55px #FFF , 185px 274px #FFF , 230px 259px #FFF , 384px 38px #FFF , 213px 10px #FFF;
}

#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 42px 220px #FFF , 41px 126px #FFF , 398px 289px #FFF , 18px 259px #FFF , 373px 265px #FFF , 113px 6px #FFF , 274px 65px #FFF , 48px 139px #FFF , 172px 298px #FFF , 379px 162px #FFF;
}
</style>