Can I randomise the position of a background gradient?

I have this custom CSS code on my Squarespace site that creates a gradient and animates it. I would like to alter this code so that the position of the gradient is randomised every time I reload the page. How would I go about that?

/* Gradient animation */
#collection-631373335b5554367a6d6496, #collection-6315119bb4eaa941a0aa617e, #collection-631518729bf3e53d3de5c632, #collection-63151986700b2b4827241df9, #collection-63151bde5812ae629c05151f, #collection-63151a542c7e4f20c67c6aec, #collection-63151b4e3efb9c1fd9c951f2, #collection-631520e2a99294780df99008, #collection-631521a03ecc7346d794bb07, #collection-63152145f7e82b5663fa3d42, #collection-6315243f7a90bc4192a371f2, #collection-631a6f149c23b71200e5d6ce, #collection-6323c23428c02c6f61ce014a, #collection-63a07f0407c73f305d336cb3, #collection-640761a352606c4720ae27d0, #collection-64298618ce9c9a50c8263f71 {  

  .section-background {
    background: linear-gradient(270deg, #8A90F9, #91F2F2, #92F492, #FFB64D, #FF5C5C, #FC92FC);
    background-size: 10000% 10000%;

    -webkit-animation: AnimationName 60s ease infinite;
    -moz-animation: AnimationName 60s ease infinite;
    animation: AnimationName 60s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

I tried asking ChatGPT. It gave me this code but it did not work

Sure! Here's an updated version of the code that randomizes the initial background position:

/* Gradient animation */
#collection-631373335b5554367a6d6496, #collection-6315119bb4eaa941a0aa617e, #collection-631518729bf3e53d3de5c632, #collection-63151986700b2b4827241df9, #collection-63151bde5812ae629c05151f, #collection-63151a542c7e4f20c67c6aec, #collection-63151b4e3efb9c1fd9c951f2, #collection-631520e2a99294780df99008, #collection-631521a03ecc7346d794bb07, #collection-63152145f7e82b5663fa3d42, #collection-6315243f7a90bc4192a371f2, #collection-631a6f149c23b71200e5d6ce, #collection-6323c23428c02c6f61ce014a, #collection-63a07f0407c73f305d336cb3, #collection-640761a352606c4720ae27d0, #collection-64298618ce9c9a50c8263f71 {

.section-background {
background: linear-gradient(270deg, #8A90F9, #91F2F2, #92F492, #FFB64D, #FF5C5C, #FC92FC);
background-size: 10000% 10000%;
background-position: calc(100% * var(--rand-x)) calc(100% * var(--rand-y));

-webkit-animation: AnimationName 60s ease infinite;
-moz-animation: AnimationName 60s ease infinite;
animation: AnimationName 60s ease infinite;
}

@-webkit-keyframes AnimationName {
0%{background-position: calc(100% * var(--rand-x)) calc(100% * var(--rand-y))}
50%{background-position: calc(100% * var(--rand-x) - 100%) calc(100% * var(--rand-y))}
100%{background-position: calc(100% * var(--rand-x)) calc(100% * var(--rand-y))}
}
@-moz-keyframes AnimationName {
0%{background-position: calc(100% * var(--rand-x)) calc(100% * var(--rand-y))}
50%{background-position: calc(100% * var(--rand-x) - 100%) calc(100% * var(--rand-y))}
100%{background-position: calc(100% * var(--rand-x)) calc(100% * var(--rand-y))}
}
@keyframes AnimationName {
0%{background-position: calc(100% * var(--rand-x)) calc(100% * var(--rand-y))}
50%{background-position: calc(100% * var(--rand-x) - 100%) calc(100% * var(--rand-y))}
100%{background-position: calc(100% * var(--rand-x)) calc(100% * var(--rand-y))}
}
}

/* Randomize background position */
.section-background {
--rand-x: calc( Math.random() );
--rand-y: calc( Math.random() );
}