Pure CSS infinite space/galaxy with just one Div

#css #webdev #beginners #programming

In this article I will show you how you can create this infinite space/galaxy zoom effect using just one sing div and pure CSS.

Okay so let's create our index.html which will only contain one single div



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="main"></div>
</body>
</html>

Now lets write some basic styles in our style.css



body{
    background-color: #000;
}

.main{
    position: fixed;
    top: 50%;
    left: 50%;
    height: 10px;
    width: 10px;
    background-color: #fff;
    border-radius: 50%;
}

Now if you open it up in the browser you will see just a small circle in middle of our page.

But we don't want just one, we want a lot of them. Lets move slow and think how you can make two star/circle out on one div?
Well we can use box shadow. We know the syntax on box shadow is box-shadow: offset_form_X_axis offset_form_Y_axis blur_amount sperad_amount color so for example box-shadow: 30px 50px 3px 1px #fff
So let's try to add a box shadow to our div.



body{
    background-color: #000;
}

.main{
    position: fixed;
    top: 50%;
    left: 50%;
    height: 10px;
    width: 10px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 30px 50px 3px 1px #fff;
}

And now we have a second circle with some blur. Which is great because stars aren't supposed to be sharp circle.
We can make the star bigger by using a bigger number for our spread.



body{
    background-color: #000;
}

.main{
    position: fixed;
    top: 50%;
    left: 50%;
    height: 10px;
    width: 10px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 30px 50px 3px 20px #fff;
}

So we can use little or lot of spread to make our star smaller or bigger to give a feel that the star is near or far way.

Okay so now we lets make the start smaller 10px is too big.



body{
    background-color: #000;
}

.main{
    position: fixed;
    top: 50%;
    left: 50%;
    height: 1px;
    width: 1px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 30px 50px 3px 20px #fff;
}

And now we can barely even see the main div. But that's okay for now.
But the bigger issue is 2 star is not enough we want a lot of them.

Well guess what?

We can have multiple layer of box shadows, they just need to separated by comma.



body{
    background-color: #000;
}

.main{
    position: fixed;
    top: 50%;
    left: 50%;
    height: 1px;
    width: 1px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 30px 50px 3px 20px #fff,
                -30px -70px 1px 10px #fff;
}

So just like this we have to create a lot of layer to create a lot of stars.
But doing that manually would suck so we can cheat a bit 👉👈.
We are going to use javascript to generate a string of multilayer box shadow.
This would not be completely cheating because we are only using JS to generate the CSS string.



function randomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min
}

const STAR_COUNT = 100
let result = ""
for(let i = 0; i < STAR_COUNT; i++){
    result += `${randomNumber(-50, 50)}vw ${randomNumber(-50, 50)}vh ${randomNumber(0, 3)}px ${randomNumber(0, 3)}px #fff,`
}
console.log(result.substring(0, result.length - 1))

So now we can just copy the generated code and paste it in our CSS.



body{
    background-color: #000;
}

.main{
    position: fixed;
    top: 50%;
    left: 50%;
    height: 1px;
    width: 1px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: -24vw -44vh 2px 2px #fff,38vw -4vh 0px 0px #fff,-20vw -48vh 1px 2px #fff,-39vw 38vh 3px 1px #fff,-42vw -11vh 0px 3px #fff,12vw 15vh 3px 3px #fff,42vw 6vh 3px 2px #fff,-8vw 9vh 0px 2px #fff,34vw -38vh 1px 0px #fff,-17vw 45vh 3px 1px #fff,22vw -36vh 3px 2px #fff,-42vw 1vh 1px 0px #fff;/*I have only kept a few layers for readability here*/
}

Finally we can add a zoom in and out animation to make it ever more cool.



body{
    background-color: #000;
}

.main{
    position: fixed;
    top: 50%;
    left: 50%;
    height: 1px;
    width: 1px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: -24vw -44vh 2px 2px #fff,38vw -4vh 0px 0px #fff,-20vw -48vh 1px 2px #fff,-39vw 38vh 3px 1px #fff,-42vw -11vh 0px 3px #fff,12vw 15vh 3px 3px #fff,42vw 6vh 3px 2px #fff,-8vw 9vh 0px 2px #fff,34vw -38vh 1px 0px #fff,-17vw 45vh 3px 1px #fff,22vw -36vh 3px 2px #fff,-42vw 1vh 1px 0px #fff;
    animation: zoom 10s alternate infinite;
}

@keyframes zoom {
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.5);
    }
}