In this article, we explore the complex world of CSS shadows and clarify the key distinctions between “Box Shadow” and “Drop Shadow.”
Table of Content
What is Box Shadow?
- Box shadow is a CSS property that allows you to add shadow effects to elements on a web page.
- This property allows you to specify the horizontal and vertical offset of the shadow, the blur radius, and the color of the shadow. You can also specify multiple shadows, which can be used to create more complex effects.
Syntax:
box-shadow: h-offset v-offset blur spread color;
-
Parameters:
- Horizontal offset: The distance the shadow is offset to the right of the element.
- Vertical offset: The distance the shadow is offset below the element.
- Blur radius: The amount of blur applied to the shadow.
- Spread radius: The amount by which the shadow is spread out.
- Color: The color of the shadow.
Advantages of Using Box Shadow:
- Emphasizes important elements : Applying box shadows to buttons, cards, menus etc draws the eye to key interactive and informational areas.
- Subtle styling : Shadows allow subtle styling and differentiation without using heavy colors or borders. They enhance design in a subtle, unobtrusive way.
- Dynamic effects : Shadow values can be changed on different states using CSS for interesting interaction effects.
- Universal support : Box shadows are supported by all modern browsers so they ensure wide compatibility across devices and platforms.
Example of Box Shadow: This example illustrates the use of the box-shadow property where properties such as h-offset, v-offset, blur, spread & color are applied along with their values.
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</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="box">
<h4>Geeksforgeeks</h4>
</div>
<div class="box-2">
<h4>Geeksforgeeks</h4>
</div>
<div class="box-3">
<h4>Geeksforgeeks</h4>
</div>
<div class="box-4">
<h4>Geeksforgeeks</h4>
</div>
</body>
</html>
|
CSS
* { margin: 0;
padding: 0;
box-sizing: border-box;
}body { display: flex;
justify-content: center;
align-items: center;
height: 100vh;
gap: 30px;
margin: 0;
}.box { display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background-color: rgb(230, 242, 246);
border-radius: 10px;
box-shadow: 10px 10px 2px 1px rgb(11, 150, 9);
align-items: center;
}.box-2 {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background-color: rgb(230, 242, 246);
border-radius: 10px;
box-shadow: 10px -10px rgb(11, 150, 9);
align-items: center;
}.box-3 {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background-color: rgb(230, 242, 246);
border-radius: 10px;
box-shadow: inset 5em 1em rgb(11, 150, 9);
align-items: center;
}.box-4 {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background-color: rgb(230, 242, 246);
border-radius: 10px;
box-shadow: 3px 3px rgb(11, 150, 9), -1em 0 .4em rgb(184, 77, 38);
align-items: center;
} |
Output:
box-shadow
What is Drop Shadow?:
- A drop shadow is a specific type of box shadow that is used to give an element the appearance of being elevated above the page or other elements.drop-shadow() is CSS filter function that creates a shadow that conforms to the shape
- Drop shadows have offset values but no blur or spread, so they appear as a dark shape directly below/behind the element casting the shadow.
Syntax:
drop-shadow(<shadow>)
-
Parameters:
- Horizontal offset: The distance the shadow is offset to the right of the element.
- Vertical offset: The distance the shadow is offset below the element.
- Blur radius: The amount of blur applied to the shadow.
- Color: The color of the shadow.
Advantages of Using Drop Shadow:
- Emphasis on elements: Applying drop shadows draws the eye to buttons, cards, images and other elements by making them look raised above others.
- Follows principles of design: Using drop shadows aligns with principles like material design where elevation represents depth.
- Timeless design style: Drop shadows mimic real-world lighting to make interfaces feel natural and familiar.
- Subtle styling: Drop shadows allow subtle styling without heavy colors or borders. They enhance the design in an unobtrusive way.
Example of Drop-Shadow: This example illustrates the use of the drop-shadow property where properties such as h-offset, v-offset, blur, & color are applied along with their values.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="box-2">
<h4>Geeksforgeeks</h4>
</div>
<div class="box-3">
<h4>Geeksforgeeks</h4>
</div>
<div class="box-4">
<h4>Geeksforgeeks</h4>
</div>
</body>
</html>
|
CSS
* { margin: 0;
padding: 0;
box-sizing: border-box;
}body { display: flex;
justify-content: center;
align-items: center;
height: 100vh;
gap: 30px;
margin: 0;
}.box-2 {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background-color: rgb(230, 242, 246);
border-radius: 10px;
filter: drop-shadow(0 0 0.75rem rgb(11, 150, 9));
align-items: center;
}.box-3 {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background-color: rgb(230, 242, 246);
border-radius: 10px;
filter: drop-shadow(20px 10px 4px rgb(11, 150, 9));
align-items: center;
}.box-4 {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background-color: rgb(230, 242, 246);
border-radius: 10px;
filter: drop-shadow(0 -6mm 4mm rgb(11, 150, 9));
align-items: center;
} |
Output:
drop-shadow
Difference between Box Shadow and Drop Shadow
|
Property |
box-shadow |
drop-shadow |
|---|---|---|
|
Definition |
CSS property that creates a rectangular shadow around an element. |
CSS filter function that creates a shadow that conforms to the shape (alpha channel) of an element. |
|
Shadow |
Can have multiple shadows defined with commas |
Only a single shadow is used |
|
Performance |
Faster |
Slower |
|
Example: |
Creating a rectangular shadow around an element, adding depth and dimension to a design, making an element stand out from the page. |
Creating a shadow that conforms to the shape of an element, creating realistic shadows, improving accessibility. |