(window.draw = function() {

    var canvas = document.getElementById("canvas"),

        context = canvas.getContext("2d"),

        stars = 500,

        colorrange = [0, 60, 240];

    context.canvas.width = window.innerWidth + 300;

    context.canvas.height = window.innerHeight + 300;

    function getRandom(min, max) {

        return Math.floor(Math.random() * (max - min + 1)) + min;

    }

    for (var i = 0; i < stars; i++) {

        var x = Math.random() * canvas.offsetWidth,

            y = Math.random() * canvas.offsetHeight,

            radius = Math.random() * 1.5,

            hue = colorrange[getRandom(0, colorrange.length - 1)],

            sat = getRandom(50, 100);

        context.beginPath();

        context.arc(x, y, radius, 0, 360);

        context.fillStyle = "hsl(" + hue + ", " + sat + "%, 88%)";

        context.fill();

    }

})();

window.addEventListener("resize", draw);

* {

  box-sizing: border-box;

}

body {

  background: -webkit-linear-gradient(bottom right, #3F1344 10%, #4A1742 20%, #522357 50%, #5539B2);

  background: linear-gradient(to top left, #3F1344 10%, #4A1742 20%, #522357 50%, #5539B2);

  height: 100vh;

  overflow: hidden;

}

#canvas {

  position: absolute;

  top: 0;

  left: 0;

  z-index: -11;

  -webkit-animation: spin 300s linear infinite;

          animation: spin 300s linear infinite;

  -webkit-transform-origin: 50% 50%;

          transform-origin: 50% 50%;

}

.circle {

  position: absolute;

  border-radius: 50%;

}

.circle:nth-child(1) {

  background: #8542b2;

  box-shadow: 0 0 10px 8px #8542b2;

  top: 2%;

  left: 6%;

  width: 92px;

  height: 92px;

  opacity: 0.93;

  -webkit-animation: float1 20s infinite linear;

          animation: float1 20s infinite linear;

}

.circle:nth-child(2) {

  background: #9c3ab0;

  box-shadow: 0 0 3px 2px #9c3ab0;

  top: 66%;

  left: 23%;

  width: 98px;

  height: 98px;

<canvas id="canvas"></canvas>

<div class="wrapper">

  <div class="colorizer1"></div>

  <div class="colorizer2"></div>

  <div class="colorizer3"></div>

  <div class="colorizer4"></div>

  <div class="circles">

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>