How to Create a Box Shadow in CSS ?
Last Updated :
07 Mar, 2024
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:
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.
HTML
<!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.
HTML
<!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:
Share your thoughts in the comments
Please Login to comment...