Adding shadow to an image can enhance its visual appeal and make it stand out on your webpage. In this article, we will explore various approaches to add shadow to an image using CSS.
Table of Content
Add Shadow on Image using box-shadow Property
The box-shadow property is commonly used to add shadow effects to elements in CSS. It allows you to specify the horizontal and vertical offsets, blur radius, spread radius, and color of the shadow.
HTML
<!DOCTYPE html> <html>
<head>
<title>Image Shadow with box-shadow</title>
<style>
.image {
box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<img class="image" src=
alt="Image with Shadow">
</body>
</html>
|
Output
Explanation:
- The .image class styles the image with a box-shadow property.
- The box-shadow property adds a shadow with 4px horizontal and vertical offsets, an 8px blur radius, and a semi-transparent black color.
Add Shadow on Image on Hover
You can also add a shadow effect to an image when it is hovered over, creating an interactive visual effect.
HTML
<!DOCTYPE html> <html>
<head>
<title>Image Shadow on Hover</title>
<style>
.image {
transition: box-shadow 0.3s ease;
}
.image:hover {
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.6);
}
</style>
</head>
<body>
<img class="image" src=
alt="Hover to see Shadow">
</body>
</html>
|
Output
Explanation:
- The setup is similar to the first approach, but we add a transition property to the .image class for a smooth shadow effect when hovering.
- The :hover pseudo-class is used to change the box-shadow property when the mouse pointer is over the image, making the shadow more pronounced.
Add Shadow on Image using filter Property with drop-shadow
The filter property with the drop-shadow function can also be used to add a shadow effect. This approach is particularly useful when you want to apply the shadow to transparent images or SVGs.
HTML
<!DOCTYPE html> <html>
<head>
<title>Image Shadow with filter</title>
<style>
.image {
filter: drop-shadow(8px 8px 16px rgba(0, 0, 0, 0.5));
}
</style>
</head>
<body>
<img class="image" src=
alt="Image Shadow">
</body>
</html>
|
Output
Explanation:
- The setup is similar to the first approach, but instead of using the box-shadow property, we use the filter property with the drop-shadow function.
- The parameters for drop-shadow are similar to those for box-shadow, but drop-shadow can apply to the entire element, including transparent areas.