CSS Shadow Effect
Last Updated :
21 Jul, 2023
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: 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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...