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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.