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">
<title>Aurora background – pure CSS</title>
<style>
/* =============================================================================
   Aurora background — CSS only: gradients, blend modes and one mask. No images.

   Usage:  <div class="aurora"> …your content… </div>
           (use a div, not <body>: a body background is painted on the page
           canvas, where the stripes cannot blend with it. For a page backdrop,
           add  position: fixed; inset: 0; z-index: -1;  to an empty .aurora div.)

   How it is built (three stacked paint layers on one element):
     .aurora           the smooth colour field: 15 gradients combined with
                       background-blend-mode
     .aurora::before   the stars: one tiny radial-gradient dot per star
     .aurora::after    the fluted-glass stripes: thin bars that brighten
                       whatever is behind them (mix-blend-mode: color-dodge)

   Everything is sized in %, so it stretches to any box. Only the stripe
   width and the star size are in px.
   ============================================================================= */

.aurora {
  --stripe: 14px;                 /* width of one glass flute */

  /* colour ramp of the central cone, shared by its two mirrored halves */
  --cone:
    #000 0%, #000001 12%, #000501 16.5%, #000601 21%, #000906 22.5%, #000c0d 23.2%, #000f17 24%,
    #001424 24.8%, #001c35 25.5%, #00274c 26.2%, #00386a 27%, #004d8b 27.8%, #0066ab 28.5%,
    #0080c7 29.2%, #009bdf 30%, #07b2f2 30.8%, #1bc3ff 31.5%, #33cfff 32.2%, #40d8ff 33%,
    #40e8ff 34.5%, #40ecff 35.2%, #40ecff 45%;
  /* placement of those halves: a box centred on 49.3%, 2.4x as tall as the element */
  --cone-box: 100% 0 / 101.4% 240%;

  position: relative;
  isolation: isolate;             /* keep the blending inside this element */
 ...