CSS Shadow Effect
The shadow effect property in CSS is used to add text and images shadow in HTML documents.
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 1: This example shows the use of the text-shadow property in CSS.
HTML
<!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 holds the pixel length, breadth, and width of the shadow and the color of the shadow.
Syntax:
boxShadow: 3px 3px 3px green;
Example: This example shows the use of the text-shadow property in CSS.
HTML
<!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:
Please Login to comment...