Advantages of Using Drop Shadow

Difference between Box Shadow and 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>w3wiki</h4>
    </div>
    <div class="box-3">
        <h4>w3wiki</h4>
    </div>
    <div class="box-4">
        <h4>w3wiki</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

Understanding CSS Shadows: Box Shadow vs. Drop Shadow

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?
Advantages of Using Box Shadow
What is Drop Shadow?
Advantages of Using Drop Shadow
Difference between Box Shadow and Drop Shadow

Advantages of Using Drop Shadow

HTML

CSS

Understanding CSS Shadows: Box Shadow vs. Drop Shadow

Similar Reads