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 ; } h 1 { 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: