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:
.png)
.png)