Create a Glowing text shadow using HTML and CSS Last Updated : 08 Jun, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report To create a glowing text-shadow, we will use HTML to create the structure and CSS for the styling of the text. With the help of CSS, we can add shadows to text. HTML Code: In this section, we will design the basic structure of the code. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glowing Text</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello !</h1> <h1>GeeksforGeeks</h1> </body> </html> CSS Code: In this section, we will use some CSS property to design the Glowing text shadow. The CSS text-shadow property applies shadow to text. The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its decorations. Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color. css body { background: black; } h1 { margin-top: 150px; text-align: center; font-size: 60px; font-family: 'century gothic'; color: #ffffcc; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px green, 0 0 30px green, 0 0 40px green, 0 0 55px green, 0 0 70px green; } Complete Code: It is the combination of the above two code sections. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glowing Text</title> <style> body { background: black; } h1 { margin-top: 150px; text-align: center; font-size: 60px; font-family: 'century gothic'; color: #ffffcc; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px green, 0 0 30px green, 0 0 40px green, 0 0 55px green, 0 0 70px green; } </style> </head> <body> <h1>Hello !</h1> <h1>GeeksforGeeks</h1> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Create a Cutout Text using HTML and CSS ? N nehaahlawat Follow Improve Article Tags : Web Technologies Write From Home Web Templates Similar Reads Create a Gradient Text Effect using HTML and CSS This article will show the approach to add a gradient effect on text using the background-clip CSS property. The final output of text using this effect is shown below. The CSS properties that would be used are flexbox, background-clip, and -webkit-background-clip and the background. HTML Section: Th 3 min read How to Create a Gradient Shadow using CSS ? A gradient shadow in CSS refers to creating a shadow effect that transitions smoothly from one color to another, using gradients. While the box-shadow property doesn't support gradients directly, you can simulate this effect by layering a semi-transparent gradient as the background or using pseudo-e 2 min read How to Create a Cutout Text using HTML and CSS ? Cutout text is used as a background header of the webpage. The cutout text creates an attractive look on the webpage. To create a cutout text we will use only HTML and CSS. We display the cutout text and then we make the text blending of an element’s background with the element’s parent. The CSS mix 2 min read Create a 3D Text Effect using HTML and CSS The 3D text effect is one of the most used text effects in the web design world. As a designer or front-end developer, one should know how to create a 3D text effect. Today we will be looking at one of the simplest and easiest methods to create text in a 3D look with HTML and CSS. ApproachCreate an 2 min read How to create a shinny button using HTML and CSS ? Buttons are undoubtedly one of the most important components of any website or app. A button should be designed in such a way that it stands out of the other component so that it is becoming clear to the user where to click and what is the button used for. There are infinite ways in which a button c 3 min read How to create linear gradient text using HTML and CSS ? The linear-gradient is used to create eye-catching text effects, particularly suitable for dark-themed websites or applications. This method involves filling text with linear-gradient color codes, making it look attractive and bold. Linear-gradient text effects are ideal for dark themes and provide 2 min read Like