Adding shadows to images is a simple yet powerful CSS technique to make your website look more polished and visually appealing. Whether you’re highlighting product photos, team portraits, or featured content, a well-applied shadow can bring your layout to life by adding depth and focus.
In this guide, you’ll learn how to add shadow to an image using CSS, with practical examples and design tips.
🔹 Why Use Image Shadows?
Image shadows help in:
- Creating a 3D or lifted effect
- Drawing attention to key visuals
- Separating images from similar-colored backgrounds
- Enhancing the overall visual hierarchy of your layout
🔹 CSS box-shadow Property
To add a shadow to an image, you use the box-shadow property, which is designed for applying shadows to box-level elements—including images.
🔹 Basic Syntax
box-shadow: horizontal-offset vertical-offset blur-radius color;
🔹 Example 1: Simple Drop Shadow on Image
✅ HTML
<img src="example.jpg" alt="Sample" class="shadow-img">
✅ CSS
.shadow-img {
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}
This adds a subtle gray shadow below and to the right of the image, creating a lifted look.
🔹 Example 2: Soft Shadow All Around
.shadow-img {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
This creates a soft, diffused shadow around all sides of the image—perfect for modern, minimal designs.
🔹 Example 3: Colored Shadows for Creative Styling
.shadow-img {
box-shadow: 0 0 15px rgba(0, 128, 255, 0.5);
}
Using colored shadows (like blue, red, or neon tones) can make images feel vibrant and dynamic—great for youth-oriented or creative websites.
🔹 Example 4: Inset Shadow (For Framed Images)
Although inset shadows don’t work directly on <img> tags, if you wrap the image inside a container (like a div), you can simulate an inset or frame effect.
✅ HTML
<div class="frame">
<img src="example.jpg" alt="Framed Image">
</div>
✅ CSS
.frame {
display: inline-block;
padding: 5px;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}
🛠️ Tips for Better Image Shadow Styling
| Tip | Why It Matters |
|---|---|
Use rgba for transparency | Keeps shadows soft and natural |
| Use consistent offsets | Ensures a clean, aligned look |
| Avoid too dark or sharp shadows | Can make design look harsh |
Use border-radius with shadows | Smoothens edges for rounded images |
🔹 Combine with Hover Effects
Adding a shadow on hover is a great way to create interactive UI effects.
.shadow-img {
transition: box-shadow 0.3s ease;
}
.shadow-img:hover {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
}
✅ Final Thoughts
Adding a shadow to an image with CSS is a fast and effective way to elevate your design. From subtle drops to bold glows, the box-shadow property gives you the creative control to make images stand out.
🔧 Summary
| Technique | Use Case |
|---|---|
box-shadow | Apply basic or advanced image shadows |
rgba() | Add softness and depth |
hover effects | Make images interactive |
