html {	
	--u: 1.25vmin;
	--c1: #9422f1;
	--c2: #25e5fc;
	--c3: #149fec;
	--c4: #89ed00;
	--c5: #f9f300;
	--c6: #f5b900;
	--c7: #ec0000;
	--c8: #ff4545;
	--c9: #ffffff;
	--c0: #2c2c2c;
  --gp: 50%/calc(var(--u) * 18) calc(var(--u) * 12);
  --rainbow: 
		var(--c0) 0 calc(var(--u) * 2.25), 
		var(--c1) 0 calc(var(--u) * 3.25), 
		var(--c2) calc(var(--u) * 3.35) calc(var(--u) * 4.25), 
		var(--c3) calc(var(--u) * 4.35) calc(var(--u) * 5.25), 
		var(--c4) calc(var(--u) * 5.35) calc(var(--u) * 6.25), 
		var(--c5) calc(var(--u) * 6.35) calc(var(--u) * 7.25), 
		var(--c6) calc(var(--u) * 7.35) calc(var(--u) * 8.25), 
		var(--c7) calc(var(--u) * 8.35) calc(var(--u) * 9.25), 
		#fff0 calc(var(--u) * 9.35) 100%;
  --shine: 
		var(--c9) 0 calc(var(--u) * 8.25), 
		var(--c8) calc(var(--u) * 8.75) calc(var(--u) * 9.25), 
		#fff0 calc(var(--u) * 9.35) 100%;
  height: 100vh;
  background:  				  
		radial-gradient(circle at 53% 130%, var(--rainbow)) var(--gp), 
		radial-gradient(circle at 49% 125%, var(--shine)) var(--gp), 
		linear-gradient(180deg, #fff0 70% , var(--c1) 100%) var(--gp),
		radial-gradient(circle at 103% 83%, var(--rainbow)) var(--gp), 
		radial-gradient(circle at 98% 78%, var(--shine)) var(--gp), 
		radial-gradient(circle at 3% 83%, var(--rainbow)) var(--gp),
		radial-gradient(circle at -2% 78%, var(--shine)) var(--gp), 
		linear-gradient(180deg, #fff0 20% , var(--c1) 50%) var(--gp),  
		radial-gradient(circle at 53% 30%, var(--rainbow)) var(--gp), 
		radial-gradient(circle at 49% 25%, var(--shine)) var(--gp);
}
// Inspired by this image from dreamstime.com:
// https://www.dreamstime.com/half-circle-d-peacock-color-symmetry-seamless-pattern-illustration-design-abstract-background-image124417660

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.