OK?
As I said, there is really no point in using custom properties then. If you are going to set a class and that class has the CSS then just set the background-color property inside each class.
Why are you using custom properties in your code? What is the point? Unless you plan to overwrite the values, I don’t really see the point.
(function randomBackground() {
const classNames = [
"bg1",
"bg2",
"bg3"
];
const random = Math.floor(Math.random() * classNames.length);
document.querySelector("body").classList.add(classNames[random]);
}());
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-repeat: no-repeat;
}
.bg1 {
background-image: linear-gradient(76.9deg, #e8bbf2, #8787fd 51.66%, #84caff 109.18%);
}
.bg2 {
background-image: linear-gradient(45deg, #102eff, #d2379b);
}
.bg3 {
background-image: radial-gradient(60% 60% at 50% 50%, rgb(40, 0, 115), rgb(0, 0, 0));
}
Just as an aside. What is it with your obsession with IIFEs? Why is your code always wrapped inside IIFEs?