Pure CSS infinite space/galaxy with just one Div 
Tags: css, webdev, beginners, programming
Published: 2021-11-30 15:58:12

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.
![CSS infinite zoom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80ywr4mbxogncowbkjxc.gif)

Okay so let's create our **index.html** which will only contain one single **div**
```html
<!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**
```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.
![centering a div css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vbp7561aj3xzt2xp2vi4.png)
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.
```css
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;
}
```
![CSS box shadow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uiup9ofmcum6nbhfgdo8.png)
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.
```css
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;
}
```
![css box shadow spread](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ittffpbqap0bar3tt88.png)
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.
```css
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;
}
```
![css box shadow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hhpr2funbaqoiip52qve.png)
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.
```css
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;
}
```
![css box multiple shadow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rem0kc4ted05qag12rpk.png)
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. 
```js
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))
```
![Generate box shadow using JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l2knx20r0kf3l3i2u7mw.png)

So now we can just copy the generated code and paste it in our CSS.
```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*/
}
```
![Pure css space/stars galaxy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oveq4iubqneeeqnpgc5g.png)
 
Finally we can add a zoom in and out animation to make it ever more cool.
```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;
    animation: zoom 10s alternate infinite;
}

@keyframes zoom {
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.5);
    }
}
```
![CSS infinite space/galaxy zoom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80ywr4mbxogncowbkjxc.gif)

Make sure you checkout my other articles and YouTube channel
{% user 0shuvo0 %}
## Was it helpful? Support me on Patreon
[![Patreon Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vnw8g7vs5pok3jwgtgv.png)](https://www.patreon.com/0shuvo0)