Create a CSS Fireflies background using HTML/CSS

In this article, we will see how to create the CSS Fireflies background using HTML & CSS, along with understanding its implementation through the illustration.

The CSS fireflies effect can be created by utilizing the CSS animation and we will implement 3 animations to achieve the fireflies effect. To create randomness, we used different animations for the different fireflies.

Approach: The following approach will be utilized to create the CSS fireflies background:

• Create a project folder and inside it create two files index.html, and style.css. Also, Link the CSS file with the HTML file. Then, create a header if needed.
• Now, make the “Background-color” of the body black.
• Create ten or more <li> tags under a <ul> tag in the HTML. These <li> tags will be used as the fireflies. Inside the <li> tag keep it blank.

HTML

<ul class="fireflies">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

• In the CSS file, we will create the fireflies. First, add the ” list-style: none; ” to the <ul> tag which will disappear the bullet signs, created for the unorder listing.
• Create the fireflies by adding the CSS to the <li> tags. First, give a height and a width to every <li> element. Now make the “border-radius: 50%;” to make the fireflies circle. Now to give a glowing effect to the fireflies we will use a yellow background color along with radial-gradient and the box shadow. & we should make the position of the fireflies absolute.

CSS

border-radius: 50%;
background-color: rgb(255, 255, 73);
background-image:
radial-gradient(rgb(249, 206, 36) 5%,
                rgb(254, 179, 4) 25%,
                rgb(252, 191, 7) 60%);
box-shadow:
    0 0 5px 2px rgb(250, 193, 93),
    0 0 20px 10px rgb(255, 228, 140),
    0 0 40px 15px rgb(255, 219, 41);
height: 5px;
width: 5px;
top: -20px;
position: absolute;

• Now, to move the fireflies in random ways we have to create three animations. The first one will control the movement from the left to right, the second will control the movement from the top to bottom, & the last one will create the blinking effect. 
• to create the animation use @keyframes and give the changing value at different times(Use step by step by step animation).

CSS

/* animations */

/* It will create the left right movement */
@keyframes leftright {

    0%,
    100% {
        left: 80%;
    }

    16.666% {
        left: 95%;
    }

    33.333% {
        left: 10%;
    }

    50% {
        left: 60%;
    }

    66.666% {
        left: 70%;
    }

    83.333% {
        left: 5%;
    }
}

/* It will create the up down movement */
@keyframes updown {

    0%,
    100% {
        top: 10px;
    }

    25% {
        top: 90%;
    }

    50% {
        top: 50%;
    }

    75% {
        top: 95%;
    }
}

/* It will create the blinking effect */
@keyframes blinking {
    0%,
    100% {
        box-shadow: 0 0 5px 2px rgb(250, 193, 93),
                      0 0 10px 5px rgb(255, 242, 63),
                    0 0 30px 10px rgb(255, 219, 41);
        height: 0;
        width: 0;
    }

    50% {
        box-shadow: 0 0 5px 2px rgb(250, 193, 93),
                      0 0 20px 10px rgb(255, 228, 140),
                    0 0 40px 15px rgb(255, 219, 41);
    }

    75% {
        box-shadow: 0 0 0px 0px rgb(250, 193, 93),
                      0 0 0px 0px rgb(255, 228, 140),
                    0 0 0px 0px rgb(255, 219, 41);
    }
}

• Now, add the animation to the <li> tags and use the Cubic-Bezier function to the up-down and the left-right movement to give the Cubic Bezier curve movement and set the animation in an infinite state.

CSS

animation: leftright 24s infinite cubic-bezier(0.39, 0, 0.63, 1),
updown 8s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1),
blinking 3s infinite;

• Now, to move the fireflies at different speeds we have to assign the different values animation-duration, animation-delay, and the animation-fill-mode. use the nth-of-type( ) properties to select the different <li>.

CSS

li:nth-of-type(1) {
  animation-delay: 1s;
  animation-duration: 65s, 81s, 0.01s;
  animation-fill-mode: backwards, backwards;
}

Example: This example illustrates the creation of the Fireflies background using HTML & CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>GeeksforGeeks</title>

    <!-- stylesheets -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- heading -->
    <header>
        <h1 class="heading">GeeksforGeeks</h1>
        <h3 class="title">
            Fireflies background using HTML/CSS
        </h3>
    </header>

    <!-- fireflies -->
    <ul class="fireflies">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>

CSS

@import url(
"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    background-color: #000000;
    background-image: linear-gradient(bottom,
                                    #000058 60%,
                                    #000033 40%);
}

header {
    width: 100%;
    height: 90px;
    position: absolute;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
}

.heading {
    color: green;
}

.title {
    font-weight: 400;
    letter-spacing: 1.5px;
}

ul.fireflies {
    list-style: none;
}

li {
    border-radius: 50%;
    background-color: rgb(255, 255, 73);
    background-image: radial-gradient(rgb(249, 206, 36) 5%,
                                      rgb(254, 179, 4) 25%,
                                      rgb(252, 191, 7) 60%);
    box-shadow: 0 0 5px 2px rgb(250, 193, 93),
                0 0 20px 10px rgb(255, 228, 140),
                0 0 40px 15px rgb(255, 219, 41);
    height: 5px;
    width: 5px;
    top: -20px;
    position: absolute;
    animation: leftright 24s infinite cubic-bezier(0.39, 0, 0.63, 1),
        updown 8s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1),
        blinking 3s infinite;
}

/* first 10 */
li:nth-of-type(1) {
    animation-delay: 1s;
    animation-duration: 65s, 81s, 0.01s;
    animation-fill-mode: backwards, backwards;
}

li:nth-of-type(2) {
    animation-delay: 0.5s;
    animation-duration: 80s, 75s, 0.01s;
}

li:nth-of-type(3) {
    animation-delay: 1.5s;
    animation-duration: 70s, 60s, 0.01s;
    animation-fill-mode: backwards, backwards;
}

li:nth-of-type(4) {
    animation-delay: 2.5s;
    animation-duration: 90s, 80s, 0.01s;
}

li:nth-of-type(5) {
    animation-delay: 0.3s;
    animation-duration: 55s, 75s, 0.01s;
}

li:nth-of-type(6) {
    animation-delay: 2.2s;
    animation-duration: 79s, 63s, 0.01s;
    animation-fill-mode: backwards, backwards;
}

li:nth-of-type(7) {
    animation-delay: 0.9s;
    animation-duration: 70s, 80s, 0.01s;
}

li:nth-of-type(8) {
    animation-delay: 1.6s;
    animation-duration: 50s, 40s, 0.01s;
    animation-fill-mode: backwards, backwards;
}

li:nth-of-type(9) {
    animation-delay: 1.8s;
    animation-duration: 77s, 88s, 0.01s;
}

li:nth-of-type(10) {
    animation-delay: 3s;
    animation-duration: 87s, 73s, 0.01s;
    animation-fill-mode: backwards, backwards;
}

/* last 10 */
li:nth-of-type(11) {
    animation-delay: 1s;
    animation-duration: 60s, 78s, 0.01s;
    animation-fill-mode: backwards, backwards;
}

li:nth-of-type(12) {
    animation-delay: 0.5s;
    animation-duration: 85s, 80s, 0.01s;
}

li:nth-of-type(13) {
    animation-delay: 1.5s;
    animation-duration: 75s, 66s, 0.01s;
    animation-fill-mode: backwards, backwards;
}

li:nth-of-type(14) {
    animation-delay: 2.5s;
    animation-duration: 87s, 75s, 0.01s;
}

li:nth-of-type(15) {
    animation-delay: 0.3s;
    animation-duration: 69s, 85s, 0.01s;
}

li:nth-of-type(16) {
    animation-delay: 2.2s;
    animation-duration: 80s, 77s, 0.01s;
    animation-fill-mode: backwards, backwards;
}

li:nth-of-type(17) {
    animation-delay: 0.9s;
    animation-duration: 65s, 88s, 0.01s;
}

li:nth-of-type(18) {
    animation-delay: 1.6s;
    animation-duration: 59s, 63s, 0.01s;
    animation-fill-mode: backwards, backwards;
}

li:nth-of-type(19) {
    animation-delay: 1.8s;
    animation-duration: 88s, 79s, 0.01s;
}

li:nth-of-type(20) {
    animation-delay: 3s;
    animation-duration: 59s, 75s, 0.01s;
    animation-fill-mode: backwards, backwards;
}

/* animations */

/* It will create the left right movement */
@keyframes leftright {

    0%,
    100% {
        left: 80%;
    }

    16.666% {
        left: 95%;
    }

    33.333% {
        left: 10%;
    }

    50% {
        left: 60%;
    }

    66.666% {
        left: 70%;
    }

    83.333% {
        left: 5%;
    }
}

/* It will create the up down movement */
@keyframes updown {

    0%,
    100% {
        top: 10px;
    }

    25% {
        top: 90%;
    }

    50% {
        top: 50%;
    }

    75% {
        top: 95%;
    }
}

/* It will create the blinking effect */
@keyframes blinking {

    0%,
    100% {
        box-shadow: 0 0 5px 2px rgb(250, 193, 93),
                    0 0 10px 5px rgb(255, 242, 63),
                    0 0 30px 10px rgb(255, 219, 41);
        height: 0;
        width: 0;
    }

    50% {
        box-shadow: 0 0 5px 2px rgb(250, 193, 93),
                    0 0 20px 10px rgb(255, 228, 140),
                    0 0 40px 15px rgb(255, 219, 41);
    }

    75% {
        box-shadow: 0 0 0px 0px rgb(250, 193, 93),
                    0 0 0px 0px rgb(255, 228, 140),
                    0 0 0px 0px rgb(255, 219, 41);
    }
}

Output: From the output, we can see the fireflies background created only in HTML & CSS.

Fireflies Background