How to get a random background from a list

I created this code 3 different ways.

Are any of these the preferred ways in how the code should be written?

Are any of these good?

Maybe one of these could be modified or adjusted.

I was told different things on how the code should be made.

How it works is, after a page is loaded, only 1 background is selected from a group of backgrounds.

Clicking Run Code snippet produces a new background image.

Code 1 https://jsfiddle.net/0hcgkurm/

(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);
}());

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

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

Code 2 https://jsfiddle.net/f7qopgwL/

(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] + ')';
}());

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

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-repeat: no-repeat;
}

Code 3 https://jsfiddle.net/r9bygt3d/

(function randomBackground() {
  const classNames = [
    "bg1",
    "bg2",
    "bg3",
    "bg4",
    "bg5",
    "bg6",
    "bg7",
    "bg8",
    "bg9",
    "bg10"
  ];

  const random = Math.floor(Math.random() * classNames.length);
  document.querySelector("body").classList.add(classNames[random]);
}());

.bg1 {
  --color: linear-gradient(76.9deg, #e8bbf2, #8787fd 51.66%, #84caff 109.18%);
}

.bg2 {
  --color: linear-gradient(45deg, #102eff, #d2379b);
}

.bg3 {
  --color: radial-gradient(60% 60% at 50% 50%, rgb(40, 0, 115), rgb(0, 0, 0));
}

.bg4 {
  --color: radial-gradient(rgba(80, 0, 0, 0.1) 0%, rgba(80, 0, 0, 0.2) 30%, rgba(21, 11, 1, 0.9) 100%), linear-gradient(to right, #02111d, #037bb5, #02111d);
}

.bg5 {
  --color: radial-gradient(rgba(80, 0, 0, 0.1) 0%, rgba(80, 0, 0, 0.2) 30%, rgba(21, 11, 1, 0.9) 100%), linear-gradient(to right, #02111d, #037bb5, #02111d);

}

.bg6 {
  --color: radial-gradient(circle at 5% 13%, #0b7bd2, #3d41b4 40%, #591fa4 101%);
}

.bg7 {
  --color: linear-gradient(95deg, #67115e, #2d0546 31%, #160322);
}

.bg8 {
  --color: linear-gradient(darkviolet, navy);
}

.bg9 {
  --color: linear-gradient(120deg, rgba(255, 125, 255, 0.7), rgba(125, 85, 255, 0.7) 70%);
}

.bg10 {
  --color: linear-gradient(90deg, #10069F, #9932CC);
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: var(--color);
  background-repeat: no-repeat;
}