Animated Gradient Generator

/* Typed custom properties so the centers can be animated */
@property --ag-x0 { syntax: "<percentage>"; inherits: false; initial-value: 18%; }
@property --ag-y0 { syntax: "<percentage>"; inherits: false; initial-value: 24%; }
@property --ag-x1 { syntax: "<percentage>"; inherits: false; initial-value: 82%; }
@property --ag-y1 { syntax: "<percentage>"; inherits: false; initial-value: 26%; }
@property --ag-x2 { syntax: "<percentage>"; inherits: false; initial-value: 72%; }
@property --ag-y2 { syntax: "<percentage>"; inherits: false; initial-value: 78%; }
@property --ag-x3 { syntax: "<percentage>"; inherits: false; initial-value: 24%; }
@property --ag-y3 { syntax: "<percentage>"; inherits: false; initial-value: 80%; }

@keyframes ag-float {
  0%, 100% {
    --ag-x0: 18%; --ag-y0: 24%;
    --ag-x1: 82%; --ag-y1: 26%;
    --ag-x2: 72%; --ag-y2: 78%;
    --ag-x3: 24%; --ag-y3: 80%;
  }
  50% {
    --ag-x0: 8%; --ag-y0: 33%;
    --ag-x1: 92%; --ag-y1: 17%;
    --ag-x2: 62%; --ag-y2: 69%;
    --ag-x3: 34%; --ag-y3: 89%;
  }
}

.gradient {
  position: relative;
  isolation: isolate;
  --ag-x0: 18%;
  --ag-x1: 82%;
  --ag-x2: 72%;
  --ag-x3: 24%;
  --ag-y0: 24%;
  --ag-y1: 26%;
  --ag-y2: 78%;
  --ag-y3: 80%;
  background-color: #0b1020;
  background-image:
    radial-gradient(circle at var(--ag-x0) var(--ag-y0), #ff5b04 0%, transparent 55%),
    radial-gradient(circle at var(--ag-x1) var(--ag-y1), #4a6cf7 0%, transparent 55%),
    radial-gradient(circle at var(--ag-x2) var(--ag-y2), #c45bf7 0%, transparent 55%),
    radial-gradient(circle at var(--ag-x3) var(--ag-y3), #0ea5a3 0%, transparent 55%);
  animation: ag-float 14s ease-in-out infinite;
}

/* Self-contained procedural grain */
.gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'180'%20height%3D'180'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.9'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E");
  background-size: 180px 180px;
  mix-blend-mode: soft-light;
  opacity: 0.28;
}