Create a Galaxy Background using HTML/CSS

Last Updated : 25 Jun, 2022

In this article, we will see how to create the galaxy background using the HTML & CSS, along with knowing the basic CSS properties used & will understand it through the example. A galaxy background means a small bunch of circles having different sizes with different shades and a dark background. This task can be accomplished by utilizing the following CSS properties:

background-color: This property is used to implement the black-background color to the body element. The background covers the total size of the element with padding and border but excluding margin.
border-radius: This property is used to round the corners of the outer border edges of an element. Here, we have used this property to create the circular star-shaped symbol.
box-shadow: This property is used to give a shadow-like effect to the frames of an element. The multiple effects can be applied to the element’s frame which is separated by the comma. Here, we have used this property to add the shadow effect to the circular star-shaped symbol.
height: This property is used to set the height of the element. Here, we have used this property to add height to the circular star-shaped symbol.
width: This property is used to set the width of the element. The width can be assign to the text and images in the form of pixels(px), percentage(%), centimetre(cm) etc. Here, we have used this property to add width to the circular star-shaped symbol.

Approach: In order to create the galaxy background, we will define a <div> element and an image, along with having a class as .gfg that will contain the above required styling properties to utilized them to make the stars of different sizes with a dark background.

Example: In the below example, we have created a galaxy in the background using the basics of HTML and CSS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Galaxy background using HTML & CSS 
    </title> 
  
    <style> 
        body { 
            background-color: black; 
        } 
  
        .gfg { 
            top: 60%; 
            left: 40%; 
            bottom: 50%; 
            height: 12px; 
            width: 12px; 
            background-color: white; 
            border-radius: 80%; 
            box-shadow: 34em 54em 3px 4px red, 38vw -4vh 2px 5px lightgreen, 
                -20vw -148vh 8px 4px green, -39vw 38vh 4px 10px pink, 
                -42vw -11vh 4px 13px green, 12vw 15vh 3px 3px grey, 
                42vw 6vh 3px 2px yellow, -8vw 9vh 0px 2px blue, 
                34vw -38vh 1px 0px red, -17vw 45vh 3px 1px lightgreen, 
                22vw -36vh 3px 10px red, -42vw 1vh 1px 0px yellow, 
                42vw -26vh 3px 10px purple, 36vh 5px 10px red; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png" 
            alt="GFG image"
            height="150px" /> 
        <div class="gfg"></div> 
    </center> 
</body> 
  
</html> 