Select a random CSS class from a list – JavaScript – SitePoint Forums

Here’s another way I was able to write it. https://jsfiddle.net/0hcgkurm/

:root {
  --bg-color: linear-gradient();
}

body {
  background: var(--bg-color, white);
  background-repeat: no-repeat;
  min-height: 100vh;
  overflow: hidden;
}

(function randomBackground() {

  const linearGradients = [
    "linear-gradient(to right, #c6ffdd, #fbd786, #f7797d)",
    "linear-gradient(to right, #6a3093, #a044ff)",
    "linear-gradient(to right, #a8ff78, #78ffd6)",
    "linear-gradient(to right, #6d6027, #d3cbb8)",
    "linear-gradient(to right, #4da0b0, #d39d38)",
    "linear-gradient(to right, #74ebd5, #acb6e5)",
    "linear-gradient(to right, #12c2e9, #c471ed, #f64f59)",
    "linear-gradient(to right, #4b79a1, #283e51)",
    "linear-gradient(to right, #0099f7, #f11712)"
  ];

  const randomColor =
    linearGradients[Math.floor(Math.random() * linearGradients.length)];
  document.querySelector("body").style.setProperty("--bg-color", randomColor);
}());

or maybe this way: https://jsfiddle.net/f7qopgwL/

:root {
  --color-a: linear-gradient(120deg, #155799, #159957);
  --color-b: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
  --color-c: linear-gradient(45deg, #102eff, #d2379b);
}

(function randomBackground() {
  const varNames = [
    "color-a",
    "color-b",
    "color-c"
  ];

  const random = Math.floor(Math.random() * varNames.length);
  document.body.style.backgroundImage="var(--" + varNames[random] + ')';
}());