CSS | Shadow Effect - GeeksforGeeks

The shadow effect property in CSS is used to add text and images shadow in HTML document.

Text Shadow: The CSS text-shadow property is used to display the text with shadow. This property holds the pixel length, breadth, and width of the shadow and the color of the shadow.

Syntax:

Text-shadow: 3px 3px 3px green;

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>text-shadow property</title> 
        <style> 
            h1 { 
                color: green; 
                text-shadow: 3px 3px 3px lightgreen; 
            } 
        </style> 
    </head> 
    <body> 
        <h1>Geeks For Geeks | A computer Science portal for Geeks</h1> 
    </body> 
</html>                     

Output:

TextBox Shadow: The CSS boxShadow property applies shadow to the text box. This property hold the pixel length, breadth, and width of the shadow and the color of the shadow.

Syntax:

boxShadow: 3px 3px 3px green;

Example:

<!DOCTYPE html> 
<html> 
     <head> 
         <title>box shadow property</title> 
         <style>
               #Gfg { 
                   width: 220px; 
                   height: 50px; 
                   background-color: green; 
                   color: white; 
               } 
          </style> 
          <script> 
   
               // function that show Shadow Effect. 
               function Shadow() { 
                  document.getElementById("Gfg").style.boxShadow  
                                           = "5px 5px 5px gray"; 
               } 
          </script> 
     </head> 
     <body> 
          <button onclick = "Shadow()">Click to see Shadow</button> 
          <div id = "Gfg"> 
            <h1>GeeksforGeeks</h1> 
          </div> 
     </body> 
</html> 

Output:
box shadow property

My Personal Notes

Jul	AUG	Sep
	10
2018	2019	2020

Suggest a Topic

Recommended Posts: