stars.css

.star {
  position: absolute;
  width: 14px;
  height: 14px;
  background: radial-gradient(#fff, #0000, #0000);
  border-radius: 50%;
  right: 300px;
  animation: falling-star linear infinite;
}
.blaze,
.blaze::before,
.blaze::after {
  position: absolute;
  width: 300px;
  border-radius: 1in 50%50% 1in;
}
.blaze {
  height: 14px;
  background: linear-gradient(90deg, #ffffff12, #0000);
}
.blaze::before {
  content: "";
  height: 8px;
  background: linear-gradient(90deg, #ffffff24, #0000);
  top: 50%;
  transform: translate(-49%, -50%);
}
.blaze::after {
  content: "";
  height: 2px;
  background: linear-gradient(90deg, #fff, #0000);
  top: 50%;
  transform: translate(-48%, -50%);
}
@media screen and (max-width: 500px) {
  .star {
    right: 150px;
  }
  .blaze,
  .blaze::before,
  .blaze::after {
    width: 150px;
  }
  .blaze::before {
    transform: translate(-48%, -50%);
  }
  .blaze::after {
    transform: translate(-46%, -50%);
  }
}
@keyframes falling-star {
  0% {
    transform: rotate(-20deg) translateX(0);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: rotate(-20deg) translateX(-60vh);
    opacity: 0;
  }
}