Create a Glowing text shadow using HTML and CSS

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 shadow to text.

HTML Code: In this section, we will design the basic structure of the code.

<!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.

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 above two code section.

<!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:

My Personal Notes

Recommended Posts: