JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#020216">
  <meta name="description" content="A pure CSS study of luminous cyan fluted glass, a coral glow, and scattered gold dust.">
  <title>Spectral Glow — Pure CSS Background</title>
  <link rel="stylesheet" href="background.css">
</head>
<body>
  <div class="spectral-background" role="img" aria-label="A luminous ribbed background with a cyan peak, coral glow, and tiny gold stars.">
    <div class="light-field" aria-hidden="true">
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </div>
    <div class="fluting" aria-hidden="true"></div>
    <div class="gold-dust" aria-hidden="true"></div>
  </div>
</body>
</html>

CSS

/* Pure CSS spectral light background. No images, SVG, canvas, or JavaScript.
   The color field is a gradient mesh: vertical color profiles cross-fade
   horizontally. The glass fluting and gold dust are independent CSS layers. */

:root {
  color-scheme: dark;
  --rib-width: clamp(7px, 0.8083vw, 14px);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { background: #020216; }

.spectral-background {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background: #020216;
}

.light-field, .light-field > i, .fluting, .gold-dust {
  position: absolute;
  inset: 0;
}

.light-field > i {
  display: block;
  background: var(--profile);
  -webkit-mask-image: var(--fade, linear-gradient(#000, #000));
  mask-image: var(--fade, linear-gradient(#000, #000));
}

.light-field > i:nth-child(1) {
  --profile: linear-gradient(180deg,
    #0a0118 0%,
    #0b001a 2.5%,
    #0b001b 5%,
    #0a001b 7.5%,
    #08001c 10%,
    #07011d 12.5%,
    #06011d 15%,
    #06011e 17.5%,
    #04021d 20%,
    #02041e 22.5%,
    #010622 25%,
    #000925 27.5%,
    #000b29 30%,
    #000d2d 32.5%,
    #000e30 35%,
    #001037 37.5%,
    #00143f 40%,
    #001949 42.5%,
    #011f53 45%,
    #012760 47.5%,
    #01306b 50%,
    #013b77 52.5%,
    #014b84 55%,
    #025a93 57.5%,
    #0a689f 60%,
    #2173a6 62.5%,
    #377aa9 65%,
    #517fa9 67.5%,
    #6d80a5 70%,
    #877e9d 72.5%,
    #a27895 75%,
    #bb708a 77.5%,
    #d2657b 80%,
    #e05769 82.5%,
    #ea4a59 85%,
    #ee3c49 87.5%,
    #eb2d3b 90%,
    #e12231 92.5%,
    #c3152a 95%,
    #9d0c26 97.5%,
    #7c0621 100%);
}

.light-field > i:nth-child(2) {
  --profile: linear-gradient(180deg,
    #0b0121 0%,
    #0b0023 2.5%,
    #0b0125 5%,
    #090128 7.5%,
    #08012a 10%,
    #07022b 12.5%,
    #06042d 15%,
    #04052e 17.5%,
    #02082e 20%,
    #010b30...