CSS Shadow Effect
The shadow effect property in CSS is used to add shadows to text and images in HTML documents. This enhances the visual appeal and depth of your web elements, making your design more engaging.
Text Shadow
The text-shadow property in CSS is used to display text with a shadow. This property defines the offset, blur radius, and color of the shadow.
Syntax:
text-shadow: offsetX offsetY blurRadius color;
Example: This example shows the use of the text-shadow property in CSS.
<!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: 
Box Shadow
The box-shadow property in CSS applies a shadow effect to elements such as text boxes, divs, and images. This property defines the horizontal and vertical offsets, blur radius, spread radius, and color of the shadow.
Syntax:
box-shadow: offsetX offsetY blurRadius spreadRadius color;
Example: This example shows the use of the text-shadow property in CSS.
<!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:
CSS shadow effects are used for enhancing the visual design of your web elements. The text-shadow and box-shadow properties allow you to add depth and emphasis to text and boxes, making your webpage more dynamic and visually appealing.
