canvas#canvas
.wrapper
  .colorizer1
  .colorizer2
  .colorizer3
  .colorizer4
  .circles
    - for (var x = 1; x <= 150; x++)
      .circle
View Compiled
* {
	box-sizing: border-box;
}
body {
	background: linear-gradient(to top left, #3F1344 10%, #4A1742 20%,  #522357 50%, #5539B2);
	height: 100vh;
	overflow: hidden;
}
$primary_colors: #A135D8 #B13CC8 #D562C7 #BD369D #7022B6 #F777EE #D15BB1 #8E39A0 #6F38DC #6E44C2 #E2BCE1 #E8EBFA #D8B1F4 #DC59C1 #EAC5E6 #A83E9A #DFB2E9;

#canvas {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -11;
	animation: spin 300s linear infinite;
	transform-origin: 50% 50%;
}

.circle {
	position: absolute;
	border-radius: 50%;
}

@function create-palette() {
	$palette: ();
	@for $i from 1 through 150{
		$palette: append($palette, mix(nth($primary_colors, random(length($primary_colors))), nth($primary_colors, random(length($primary_colors))), 60%));
	}
	@return $palette;
}
$palette: create-palette();

@each $color in $palette {
	$size: random(100) + px;
	.circle:nth-child(#{index($palette, $color)}){
		background: $color;
		box-shadow: 0 0 random(10) + px random(10) + px $color;
		top: random(100) + 0%;
    left: random(100) + 0%;
    width: $size;
    height: $size;
    opacity: random(100) / 100;
    animation: float#{index($palette, $color)} 20s infinite linear;
	}
}

@for $i from 1 through 150 {
  $movex: random(100) - 20 + px;
  $movey: random(400) - 300 + px;
  $movex2: random(200) - 50 + px;
  $movey2: random(400) - 100 + px;
  @keyframes float#{$i} {
    40% {
      transform: translateX($movex) translateY($movey);
    }
    80% {
      transform: translateX($movex2) translateY($movey2);
    }
  }
}

.colorizer1, .colorizer2, .colorizer3, .colorizer4 {
	position: absolute;
	width: 300px;
	height: 300px;
	filter: blur(130px);
}

.colorizer1 {
	border-radius: 50%;
	background: linear-gradient(135deg, #A191AE, #dbdce0);
}
.colorizer2 {
	top: 20%;
	left: 70%;
	background: #63568C;
}
.colorizer3 {
	top: 80%;
	left: -15%;
	background: #2D0D34;
	filter: blur(80px);
	border-radius: 50%;
}
.colorizer4 {
	top: 20%;
	left: 35%;
	width: 100px;
	height: 100px;
	background: #bbdebc;
	filter: blur(80px);
	border-radius: 50%;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
    transform-origin: 50% 50%;
  }
  to {
    transform: rotate(360deg);
  }
}
View Compiled
(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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.