Posted on Nov 30, 2021

Pure CSS infinite space/galaxy with just one Div

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); } }