Using custom css selectors

[asasass]

I had this working awhile ago, I had figured it out.

But I forgot to save it.

I do know it was hard for me to figure out, but I don’t remember what I did.

I figured this part out. https://jsfiddle.net/39ph4bvs/9/

I think this part I have fine.

.bg1 {
  --color-a: linear-gradient(120deg, #155799, #159957);
}

.bg2 {
  --color-b: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

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

.bg4 {
  --color-d: linear-gradient(90deg, #360033 30%, #0b8793 100%);
}

.bg5 {
  --color-e: linear-gradient(115deg, #0a0e88, #00b1ce);

}

.bg6 {
  --color-f: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.bg7 {
  --color-g: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.bg8 {
  --color-h: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.bg9 {
  --color-i: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

I got stuck here:

I have no idea why my head is confused on how this is done.

body {
  background-image:
    linear-gradient(var(--color-a)),
    linear-gradient(var(--color-b)),
    linear-gradient(var(--color-c)),
    linear-gradient(var(--color-d)),
    linear-gradient(var(--color-e)),
    linear-gradient(var(--color-f)),
    linear-gradient(var(--color-g)),
    linear-gradient(var(--color-h)),
    linear-gradient(var(--color-i));
  background-repeat: no-repeat;
}

Here was my second attempt: https://jsfiddle.net/qsb2kvca/2/

I have a working version here and I am still confused.
https://jsfiddle.net/g9h4xLsv/

I have no idea why my head can’t figure this out.

body {
  background-image:
    (var(--color-a)),
    (var(--color-b)),
    (var(--color-c)),
    (var(--color-d)),
    (var(--color-e)),
    (var(--color-f)),
    (var(--color-g)),
    (var(--color-h)),
    (var(--color-i));
  background-repeat: no-repeat;
}

Here was my 3rd attempt: https://jsfiddle.net/8b0msnkL/3/

body {
  background-image:
    linear-gradient(var(--color-a), var(--color-a)),
    linear-gradient(var(--color-b), var(--color-b)),
    linear-gradient(var(--color-c), var(--color-c)),
    linear-gradient(var(--color-d), var(--color-d)),
    linear-gradient(var(--color-e), var(--color-e)),
    linear-gradient(var(--color-f), var(--color-f)),
    linear-gradient(var(--color-g), var(--color-g)),
    linear-gradient(var(--color-h), var(--color-h)),
    linear-gradient(var(--color-i), var(--color-i));
  background-repeat: no-repeat;
}

I tried reducing the code down to 1 line here:

https://jsfiddle.net/8b0msnkL/6/

That does not seem to be helping.

.bg1 {
  --color-a: linear-gradient(120deg, #155799, #159957);
}

body {
  background-image:
    linear-gradient(var(--color-a), var(--color-a));
  background-repeat: no-repeat;
}

[asasass]

Fixed: https://jsfiddle.net/g26a7svb/

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

Updated: https://jsfiddle.net/qn08dkcz/

body::before {
  content: "";
  background-image: var(--color);
  background-repeat: no-repeat;
  position: fixed;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}