A box shadow in CSS is a visual effect that adds a shadow to an HTML element, creating a sense of depth and dimension. It is a styling technique commonly used to enhance the visual appearance of elements on a webpage.
Below are the approaches to creating a box shadow in CSS:
Table of Content
Create a Box Shadow Using box-shadow property
The box-shadow property allows you to specify the shadow on horizontal and vertical offsets, blur radius, spread radius, and color. It is a widely supported method.
Example: The below code implements the box-shadow property of CSS to create a box-shadow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
Box Shadow Example - Approach 1
</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.box-example {
width: 300px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
}
.box1 {
box-shadow: 4px 4px 8px #888888;
}
</style>
</head>
<body>
<div class="box-example box1">
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>
Added box-shadow to this div
</h3>
</div>
</body>
</html>
Output:
Create a Box Shadow Using the filter property
The filter property can be used to achieve a box shadow effect. You can use it directly as the box-shadow property was used with some value.
Example: The below code will explain the use of the filter property to add shadow to an element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
Filter Property Example
</title>
<style>
.box-example {
width: 350px;
height: 350px;
background-color: #99de98;
margin: 10% auto;
border-radius: 5px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
color: #fff;
font-size: 18px;
font-weight: bold;
filter:
drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
</style>
</head>
<body>
<div class="box-example">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>
Box shadow is applied using the
filter property in CSS.
</h2>
</div>
</body>
</html>
Output:
