In this tutorial, you will learn how to create a glowing and moving particles background purely with CSS. Multiple text shadows are applied to the before and after pseudo elements of the container to create glowing circles. Watch the video below for a detailed tutorial.
<body>
<div class="container">
<h1>Particles Background</h1>
</div>
</body>body {
background: #2e3537;
}
.container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font: 60px "Roboto", sans-serif;
color: white;
}
.container:before, .container:after {
position: fixed;
top: 50%;
left: 50%;
width: 3em;
height: 3em;
content: '.';
mix-blend-mode: screen;
animation: animate 44s -27s infinite ease-in-out alternate;
}
@keyframes animate {
from {
transform: rotate(0deg) scale(12) translateX(-20px);
}
to {
transform: rotate(360deg) scale(18) translateX(20px);
}
}
.container:before {
text-shadow:
50px 55px 7px rgba(194, 3, 252, 0.9),
30px 49px 7px rgba(3, 119, 252, 0.9),
35px 6px 7px rgba(255, 42, 42, 0.9),
69px 14px 7px rgba(245, 159, 212, 0.9),
49px 18px 7px rgba(144, 252, 3, 0.9),
52px -10px 7px rgba(3, 223, 252, 0.9),
25px 25px 7px rgba(78, 3, 252, 0.9),
90px 37px 7px rgba(252, 3, 177, 0.9),
75px 55px 7px rgba(252, 186, 3, 0.9)
;
animation-duration: 44s;
animation-delay: -27s;
}
.container:after {
text-shadow:
145px 6px 7px rgba(46, 20, 194, 0.9),
61px 40px 7px rgba(218, 217, 202, 0.9),
88px 14px 7px rgba(156, 40, 252, 0.9),
92px -10px 7px rgba(255, 255, 255, 0.9),
108px 25px 7px rgba(100, 247, 178, 0.9),
105px 50px 7px rgba(224, 255, 50, 0.9),
120px 65px 7px rgba(216, 42, 65, 0.9)
;
animation-duration: 43s;
animation-delay: -32s;
}