How to Add Shadow to Image in CSS ? Last Updated : 29 Feb, 2024 Comments Improve Suggest changes Like Article Like Report 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 PropertyAdd Shadow on Image on HoverAdd Shadow on Image using filter Property with drop-shadowAdd Shadow on Image using box-shadow PropertyThe 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= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 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 HoverYou 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= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 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-shadowThe 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= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 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. Comment More infoAdvertise with us Next Article How to Add Shadow to Image in CSS ? V vkash8574 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to Add Shadow in CSS? Shadows in CSS can be used to create depth and visual interest by adding the effect that simulates the shadow of an element. It can be applied to both the text and block elements to enhance the design of the web pages. CSS can provide several properties to achieve different shadow effects, including 4 min read How to Add Shadow to Button in CSS ? This article will show you how to add shadow to a button using CSS. Button shadow can enhance its visual appeal and make it stand out on your webpage. This article will cover various approaches to adding shadow to a button using CSS. Table of Content Add Shadow on button using box-shadow PropertyAdd 3 min read How to Add Text Shadow in Tailwind CSS? Adding a text shadow in Tailwind CSS is useful for making text for creating visual effects like glows and embossed or debossed effects. Tailwind CSS does not provide text shadow utilities out of the box but it allows you to easily extend its functionality to add custom utilities. In this article, we 3 min read How to Add Shadow to Text using CSS? The text-shadow property is used to add shadow to the text. The text-shadow property creates text shadows, specifying horizontal/vertical offsets, blur radius, and color for depth and emphasis.Note: We can customize text shadow by changing position, blur, and color for improved appearance and visual 1 min read How To Add Blur Effects to Images in CSS ? Adding blur effects to the images in web applications enhances the visual appearance of the content. We can add blur effects using various CSS properties. Below are the approaches to add blur effects to images in CSS: Table of Content Using CSS filter propertyUsing backdrop-filter PropertyUsing CSS 2 min read Like