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:

import styles from './AnimatedBackground.module.css';

interface CustomCSSProperties extends React.CSSProperties {
  [key: string]: string | number | undefined;
}

export default function Background() {
  return (
    <div className={styles.container}>
      <div className={styles.stars}>
        {[...Array(50)].map((_, index) => (
          <div
            key={index}
            className={styles.star}
            style={{
              '--top-offset': `${Math.random() * 130}vh`,
              '--fall-duration': `${Math.random() * 10 + 5}s`,
              '--fall-delay': `${Math.random() * 10}s`,
            } as CustomCSSProperties} 
          ></div>
        ))}
      </div>

    {your page / component}
  </div>
  );
}

Code: AnimatedBackground.module.css

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: radial-gradient(ellipse at bottom, #0d1d31 0%, #0c0d13 100%);
    overflow: hidden;

    flex-direction: column;
  }
  
  .stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    transform: rotate(-45deg);
  }
  
  .star {
    --star-color: var(--primary-color);
    --star-tail-length: 6em;
    --star-tail-height: 2px;
    --star-width: calc(var(--star-tail-length) / 6);
    --fall-duration: 9s;
    --tail-fade-duration: var(--fall-duration);
    position: absolute;
    top: var(--top-offset);
    left: 0;
    width: var(--star-tail-length);
    height: var(--star-tail-height);
    color: var(--star-color);
    background: linear-gradient(45deg, currentColor, transparent);
    border-radius: 50%;
    filter: drop-shadow(0 0 6px currentColor);
    transform: translate3d(104em, 0, 0);
    animation: fall var(--fall-duration) 0s linear infinite, tail-fade var(--tail-fade-duration) 0s ease-out infinite;
  }
  
  @media screen and (max-width: 750px) {
    .star {
      animation: fall var(--fall-duration) var(--fall-delay) linear infinite;
    }
  }
  
  .star::before,
  .star::after {
    position: absolute;
    content: "";
    top: 0;
    left: calc(var(--star-width) / -2);
    width: var(--star-width);
    height: 100%;
    background: linear-gradient(45deg, transparent, currentColor, transparent);
    border-radius: inherit;
    animation: blink 2s linear infinite;
  }
  
  .star::before {
    transform: rotate(45deg);
  }
  
  .star::after {
    transform: rotate(-45deg);
  }
  
  @keyframes fall {
    to {
      transform: translate3d(-50em, 0, 0);
    }
  }
  
  @keyframes tail-fade {
    0%,
    50% {
      width: var(--star-tail-length);
      opacity: 1;
    }
    70%,
    80% {
      width: 0;
      opacity: 0.4;
    }
    100% {
      width: 0;
      opacity: 0;
    }
  }
  
  @keyframes blink {
    50% {
      opacity: 0.6;
    }
  }

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.