Create a Galaxy Background using HTML/CSS Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report 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> Output: Comment More infoAdvertise with us Next Article How to create a skewed background using CSS ? A abhishekpal97854368 Follow Improve Article Tags : Web Technologies CSS CSS-Properties HTML-Questions CSS-Questions +1 More Similar Reads 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 effec 7 min read How to create a skewed background using CSS ? A skewed background design enhances a website's visual appeal with dynamic, angled elements. By using CSS transform: skew() along with ::before and ::after pseudo-elements, you can easily create a slanted effect, adding a modern and engaging look to your site's layout.ApproachHTML Structure - Sectio 2 min read How to create a skewed background using CSS ? A skewed background design enhances a website's visual appeal with dynamic, angled elements. By using CSS transform: skew() along with ::before and ::after pseudo-elements, you can easily create a slanted effect, adding a modern and engaging look to your site's layout.ApproachHTML Structure - Sectio 2 min read How to create a skewed background using CSS ? A skewed background design enhances a website's visual appeal with dynamic, angled elements. By using CSS transform: skew() along with ::before and ::after pseudo-elements, you can easily create a slanted effect, adding a modern and engaging look to your site's layout.ApproachHTML Structure - Sectio 2 min read How to create texture background using CSS ? Introduction: We can use CSS property to texture the background of the web page by using an image editor to cut out a portion of the background. Apply CSS background-repeat property to make the small image fill the area where it is used. CSS provides many styling properties of the background includi 3 min read How to create texture background using CSS ? Introduction: We can use CSS property to texture the background of the web page by using an image editor to cut out a portion of the background. Apply CSS background-repeat property to make the small image fill the area where it is used. CSS provides many styling properties of the background includi 3 min read Like