CSS drop-shadow()
The drop-shadow() function is part of the CSS filter property. Unlike box-shadow, which creates a shadow around a rectangular element, drop-shadow() follows the shape of the element, including images with transparency or SVGs. It’s commonly used for images, icons, or shapes to give a realistic shadow effect.
Syntax
filter: drop-shadow(offset-x offset-y blur-radius color);
Parameters:
| Parameter | Description |
|---|---|
offset-x | Horizontal distance of the shadow (positive → right, negative → left) |
offset-y | Vertical distance of the shadow (positive → down, negative → up) |
blur-radius | Softens the edges of the shadow (optional, default is 0) |
color | Shadow color (optional, default is black) |
Basic Example
<h2>Drop Shadow Example</h2>
<img src="<https://img.freepik.com/premium-photo/best-amazing-wonderful-this-photo-take-this-picture-your-work-ai-generated-top-lovely-photo_1169327-87093.jpg>" alt="Sample Image" class="shadow-img">
.shadow-img {
width: 200px;
filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.5));
}
Output :
Using with Transparent Images
drop-shadow() is perfect for images with transparent backgrounds (like PNGs or SVGs), because the shadow will only follow the visible shape, not the rectangular bounding box.
<h2>Drop Shadow with Transparent</h2>
<img src="<https://img.freepik.com/premium-photo/best-amazing-wonderful-this-photo-take-this-picture-your-work-ai-generated-top-lovely-photo_1169327-87093.jpg>" alt="Sample Image" class="transparent-img">
body {
background: #f9f9f9;
text-align: center;
padding: 50px;
font-family: Arial, sans-serif;
}
.transparent-img {
width: 200px;
filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.4));
}
Output :
Multiple Drop Shadows
You can apply more than one drop-shadow using multiple drop-shadow() functions:
<h2>Image with Multiple Drop Shadows</h2>
<img src="<https://img.freepik.com/premium-photo/best-amazing-wonderful-this-photo-take-this-picture-your-work-ai-generated-top-lovely-photo_1169327-87093.jpg>" alt="Sample Image">
img {
width: 220px;
filter: drop-shadow(3px 3px 3px red)
drop-shadow(-3px -3px 3px blue);
}
Output :
Combining with Other Filters
drop-shadow() can be combined with other CSS filters like blur(), grayscale(), brightness(), etc.:
<h2>Grayscale + Drop Shadow Effect</h2>
<img src="<https://img.freepik.com/premium-photo/best-amazing-wonderful-this-photo-take-this-picture-your-work-ai-generated-top-lovely-photo_1169327-87093.jpg>" alt="Sample Image">
img {
width: 250px;
filter: grayscale(50%) drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}
Output :
