How to implement:

With tailwind installed in your project tutorial, implement these tailwind classes in your parent div where it will reflect the background.

Code:

html {
  height: 100%;
  background: radial-gradient(ellipse at bottom, #070d13 0%, #090A0F 100%);
  overflow: hidden;
}

/* Estrelas pequenas */
#stars {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 
    100px 100px #f8aa00, 200px 300px #f8aa00, 400px 150px #f8aa00, 800px 700px #f8aa00,
    1200px 1100px #f8aa00, 1400px 1300px #f8aa00, 1600px 1150px #f8aa00, 1800px 1700px #f8aa00,
    500px 400px #f8aa00, 600px 600px #f8aa00, 700px 900px #f8aa00, 1100px 800px #f8aa00,
    200px 1200px #f8aa00, 400px 1300px #f8aa00, 600px 1450px #f8aa00, 800px 1600px #f8aa00,
    1700px 1700px #f8aa00, 1500px 1800px #f8aa00, 1300px 1950px #f8aa00, 1100px 2100px #f8aa00;
  animation: animStar 50s linear infinite;
}

/* Estrelas médias */
#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 
    150px 200px #01a2ff, 300px 400px #01a2ff, 500px 250px #01a2ff, 900px 800px #01a2ff,
    1200px 1050px #01a2ff, 1400px 1200px #01a2ff, 1600px 1350px #01a2ff, 1800px 1500px #01a2ff,
    200px 200px #01a2ff, 400px 500px #01a2ff, 600px 800px #01a2ff, 1000px 900px #01a2ff,
    300px 1100px #01a2ff, 500px 1250px #01a2ff, 700px 1400px #01a2ff, 900px 1550px #01a2ff,
    1100px 1600px #01a2ff, 1300px 1700px #01a2ff, 1500px 1850px #01a2ff, 1700px 2000px #01a2ff;
  animation: animStar 100s linear infinite;
}

/* Estrelas grandes */
#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 
    200px 300px #FFF, 400px 500px #FFF, 600px 350px #FFF, 1000px 900px #FFF,
    1300px 1150px #FFF, 1500px 1300px #FFF, 1700px 1450px #FFF, 1900px 1600px #FFF,
    250px 400px #FFF, 450px 600px #FFF, 650px 900px #FFF, 850px 1100px #FFF,
    1050px 1200px #FFF, 1250px 1400px #FFF, 1450px 1600px #FFF, 1650px 1800px #FFF,
    1850px 1900px #FFF, 2050px 2100px #FFF, 2250px 2300px #FFF, 2450px 2500px #FFF;
  animation: animStar 150s linear infinite;
}


@keyframes animStar {
  from {
    transform: translateY(-1000px);
  }
  to {
    transform: translateY(-2000px);
  }
}

Tsx:

export default function Home() {
  return (
    <section className="h-screen bg-gradient-to-b from-[#431e47] via-[#100322] to-black">
      <div id="stars"></div>
      <div id="stars2"></div>
      <div id="stars3"></div>
    
      {your page / component}

      <div id="stars2"></div>
      <div id="stars3"></div>
      <div id="stars"></div>
    </section>
  );
}

View background:

Responsive: Mobile and desktop:

Note

If this background has served you in any way, consider following me on github or supporting me to continue working at BacksEasy.

Any questions, criticisms or improvements, please suggest them through my Linkdin..