<div class='cosmo1'></div>
<div class='cosmo2'></div>

@import url(https://fonts.googleapis.com/css?family=Days+One);
body {
  background: linear-gradient(180deg, #4A2800 0%, #110900 100%);
  overflow: hidden;
  height:100vh;
}
.star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff
}
.cosmo1 {
  position: absolute;
  top: -10%;
  left: -10%;
  opacity: .8;
}
.cosmo2 {
  position: absolute;
  top: -22%;
  left: -22%;
}

var a = $(window).width()
var b = $(window).height()
var f = a*b/2000

function star(obj, frequency, k, size) {
  for (var i=0;i<frequency;i++) {
    var x = Math.random()*a*k;
    var y = Math.random()*b*k;
    $('.'+obj).append('<div class="star" style="left:'+x+'px;top:'+y+'px;transform:scale('+size+')"></div>')
  }
}

var k1=1.2;
var k2=1.2*k1;
star('cosmo1',f,k1,1)
star('cosmo2',f*0.3,k2,2)

$(document).mousemove(function(e) {
  var posX = e.pageX;
  var posY = e.pageY;
  $('.cosmo1').css('left',(1-k1)*posX+'px')
  $('.cosmo1').css('top',(1-k1)*posY+'px')
  $('.cosmo2').css('left',(1-k2)*posX+'px')
  $('.cosmo2').css('top',(1-k2)*posY+'px')
})