Converted Background - Detail

@property --c-0 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsla(180,80%,58%,1);
}

@property --s-start-0 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 9%;
}

@property --s-end-0 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 55%;
}

@property --y-0 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 80%;
}

@property --x-0 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 85%;
}

@property --s-start-1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 5%;
}

@property --s-end-1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 72%;
}

@property --x-1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 60%;
}

@property --y-1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 24%;
}

@property --c-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsla(201,84%,67%,1);
}

@property --c-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsla(186,88%,46%,1);
}

@property --x-2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 13%;
}

@property --y-2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 82%;
}

@property --s-start-2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 5%;
}

@property --s-end-2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 52%;
}

@property --y-3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 7%;
}

@property --x-3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 24%;
}

@property --s-start-3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 13%;
}

@property --s-end-3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 68%;
}

@property --c-3 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsla(194,89%,45%,1);
}

@keyframes ani-your_css_selector_here {
  0% {
    --c-0: hsla(180,80%,58%,1);
    --s-start-0: 9%;
    --s-end-0: 55%;
    --y-0: 80%;
    --x-0: 85%;
    --s-start-1: 5%;
    --s-end-1: 72%;
    --x-1: 60%;
    --y-1: 24%;
    --c-1: hsla(201,84%,67%,1);
    --c-2: hsla(186,88%,46%,1);
    --x-2: 13%;
    --y-2: 82%;
    --s-start-2: 5%;
    --s-end-2: 52%;
    --y-3: 7%;
    --x-3: 24%;
    --s-start-3: 13%;
    --s-end-3: 68%;
    --c-3: hsla(194,89%,45%,1);
  }
  100% {
    --c-0: hsla(190,74%,54%,1);
    --s-start-0: 9%;
    --s-end-0: 55%;
    --y-0: 94%;
    --x-0: 31%;
    --s-start-1: 5%;
    --s-end-1: 72%;
    --x-1: 2%;
    --y-1: 25%;
    --c-1: hsla(187,92%,77%,1);
    --c-2: hsla(197,78%,56%,1);
    --x-2: 98%;
    --y-2: 20%;
    --s-start-2: 5%;
    --s-end-2: 52%;
    --y-3: 92%;
    --x-3: 95%;
    --s-start-3: 13%;
    --s-end-3: 68%;
    --c-3: hsla(182,60%,62%,1);
  }
}

#your_css_selector_here {
  --c-0: hsla(180,80%,58%,1);
  --s-start-0: 9%;
  --s-end-0: 55%;
  --y-0: 80%;
  --x-0: 85%;
  --s-start-1: 5%;
  --s-end-1: 72%;
  --x-1: 60%;
  --y-1: 24%;
  --c-1: hsla(201,84%,67%,1);
  --c-2: hsla(186,88%,46%,1);
  --x-2: 13%;
  --y-2: 82%;
  --s-start-2: 5%;
  --s-end-2: 52%;
  --y-3: 7%;
  --x-3: 24%;
  --s-start-3: 13%;
  --s-end-3: 68%;
  --c-3: hsla(194,89%,45%,1);
  will-change: transform,opacity;
  contain: paint;
  background-color: hsla(358,0%,100%,1);
  background-image:
    radial-gradient(circle at var(--x-0) var(--y-0),var(--c-0) var(--s-start-0),transparent var(--s-end-0)),
    radial-gradient(circle at var(--x-1) var(--y-1),var(--c-1) var(--s-start-1),transparent var(--s-end-1)),
    radial-gradient(circle at var(--x-2) var(--y-2),var(--c-2) var(--s-start-2),transparent var(--s-end-2)),
    radial-gradient(circle at var(--x-3) var(--y-3),var(--c-3) var(--s-start-3),transparent var(--s-end-3));
  animation: 10s linear infinite alternate-reverse ani-your_css_selector_here;
}