Background de Partículas

Este é um efeito de fundo que usa a propriedade CSS box-shadow para desenhar e animar muitas partículas (estrelas). Um espaço de partículas em loop infinito é expresso usando CSS puro sem usar JavaScript.

Visualização

<div class="particle-field">
  <div class="stars small"></div>
  <div class="stars medium"></div>
  <div class="stars large"></div>
</div>

.particle-field {
  position: relative;
  width: 100%;
  height: 400px;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
  border-radius: 8px;
}

/* 星のコンテナ設定 */
.stars {
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
}

/* アニメーションループのため、同じ星の配置をY軸下に配置 */
.stars::after {
  content: "";
  position: absolute;
  top: 1000px; /* 親要素の高さ以上の値 */
  background: transparent;
}

/* --- 小さい星 --- */
.small {
  width: 1px;
  height: 1px;
  box-shadow: 
    120px 80px #fff, 250px 150px #fff, 380px 220px #fff, 410px 50px #fff, 
    550px 300px #fff, 680px 120px #fff, 720px 350px #fff, 850px 80px #fff, 
    920px 250px #fff, 150px 400px #fff, 300px 500px #fff, 450px 450px #fff,
    580px 600px #fff, 710px 550px #fff, 840px 700px #fff, 970px 650px #fff,
    180px 800px #fff, 310px 750px #fff, 440px 900px #fff, 570px 850px #fff,
    700px 950px #fff, 830px 800px #fff, 960px 900px #fff, 100px 900px #fff,
    200px 200px #fff, 400px 800px #fff, 600px 100px #fff, 800px 400px #fff,
    900px 100px #fff, 350px 70px #fff;
  animation: animStar 50s linear infinite;
}
.small::after {
  width: 1px;
  height: 1px;
  box-shadow: 
    120px 80px #fff, 250px 150px #fff, 380px 220px #fff, 410px 50px #fff, 
    550px 300px #fff, 680px 120px #fff, 720px 350px #fff, 850px 80px #fff, 
    920px 250px #fff, 150px 400px #fff, 300px 500px #fff, 450px 450px #fff,
    580px 600px #fff, 710px 550px #fff, 840px 700px #fff, 970px 650px #fff,
    180px 800px #fff, 310px 750px #fff, 440px 900px #fff, 570px 850px #fff,
    700px 950px #fff, 830px 800px #fff, 960px 900px #fff, 100px 900px #fff,
    200px 200px #fff, 400px 800px #fff, 600px 100px #fff, 800px 400px #fff,
    900px 100px #fff, 350px 70px #fff;
}

/* --- 中くらいの星 --- */
.medium {
  width: 2px;
  height: 2px;
  box-shadow: 
    80px 120px #fff, 200px 250px #fff, 320px 380px #fff, 450px 100px #fff,
    510px 450px #fff, 650px 200px #fff, 780px 50px #fff, 820px 300px #fff,
    950px 150px #fff, 100px 550px #fff, 220px 700px #fff, 350px 650px #fff,
    480px 800px #fff, 610px 750px #fff, 740px 900px #fff, 870px 850px #fff,
    150px 950px #fff, 280px 800px #fff, 410px 900px #fff, 540px 1000px #fff,
    250px 50px #fff, 500px 300px #fff, 750px 600px #fff, 900px 900px #fff;
  animation: animStar 100s linear infinite;
}
.medium::after {
  width: 2px;
  height: 2px;
  box-shadow: 
    80px 120px #fff, 200px 250px #fff, 320px 380px #fff, 450px 100px #fff,
    510px 450px #fff, 650px 200px #fff, 780px 50px #fff, 820px 300px #fff,
    950px 150px #fff, 100px 550px #fff, 220px 700px #fff, 350px 650px #fff,
    480px 800px #fff, 610px 750px #fff, 740px 900px #fff, 870px 850px #fff,
    150px 950px #fff, 280px 800px #fff, 410px 900px #fff, 540px 1000px #fff,
    250px 50px #fff, 500px 300px #fff, 750px 600px #fff, 900px 900px #fff;
}

/* --- 大きい星 --- */
.large {
  width: 3px;
  height: 3px;
  box-shadow: 
    50px 200px #fff, 180px 50px #fff, 300px 300px #fff, 420px 150px #fff,
    550px 400px #fff, 680px 50px #fff, 800px 250px #fff, 920px 450px #fff,
    100px 600px #fff, 250px 800px #fff, 380px 700px #fff, 500px 950px #fff,
    620px 850px #fff, 750px 1000px #fff, 880px 750px #fff, 120px 900px #fff;
  animation: animStar 150s linear infinite;
}
.large::after {
  width: 3px;
  height: 3px;
  box-shadow: 
    50px 200px #fff, 180px 50px #fff, 300px 300px #fff, 420px 150px #fff,
    550px 400px #fff, 680px 50px #fff, 800px 250px #fff, 920px 450px #fff,
    100px 600px #fff, 250px 800px #fff, 380px 700px #fff, 500px 950px #fff,
    620px 850px #fff, 750px 1000px #fff, 880px 750px #fff, 120px 900px #fff;
}

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