Create a Galaxy Background using HTML/CSS Last Updated : 25 Jun, 2022 Summarize Comments Improve Suggest changes Share 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 Create a Galaxy Background using HTML/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 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 Wave Background using CSS? A wave background is a design element having wavy patterns or shapes used to add movement in the web pages. The :before pseudo-element can be used to create a wavy background by applying it to an element and using CSS properties like clip-path to create wave shapes.Using :before pseudo-elementTo cre 2 min read How to create linear gradient background using CSS ? In CSS, we can use the background-color property to set the background color of an element to a specific color. Sometimes we want to add more styling to the element when setting the background color by using the linear-gradient property. CSS linear-gradient property lets you display smooth transitio 4 min read Like