CSS: How to Add Shadow to a div – Bring Depth to Your Layout

Shadows are a key part of modern web design. They create depth, focus, and visual hierarchy, helping elements like cards, containers, and modals stand out. In CSS, adding a shadow to a <div> is quick and powerful, thanks to the box-shadow property.

In this blog post, you’ll learn how to add shadows to a <div> using CSS, with code examples, design tips, and best practices.

Table of Contents

🔹 What is `box-shadow`?

The box-shadow property in CSS lets you apply one or more shadows to an element’s box. It’s ideal for elements like <div>, <section>, <article>, and other containers.

🔹 Basic Syntax

box-shadow: h-offset v-offset blur spread color;

h-offset: Horizontal offset (right if positive, left if negative)
v-offset: Vertical offset (down if positive, up if negative)
blur: Blur radius (higher means softer shadow)
spread (optional): Shadow size expansion or shrink
color: Shadow color (hex, rgba, etc.)

🔹 Example 1: Basic Shadow on a Div

✅ HTML

<div class="box">This is a box with shadow.</div>

✅ CSS

.box {
  width: 300px;
  padding: 20px;
  background-color: white;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}

This creates a soft shadow below and to the right of the box.

🔹 Example 2: Elevated Card Style

.card {
  background: #fff;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

Great for modern UI cards or containers.

🔹 Example 3: Inset Shadow

Inset shadows appear inside the element.

.inset-box {
  background: #f0f0f0;
  padding: 30px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

This is useful for creating recessed or sunken effects.

🔹 Example 4: Hover Shadow Effect

.shadow-hover {
  transition: box-shadow 0.3s ease;
}

.shadow-hover:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

Perfect for interactive elements like cards and buttons. The shadow appears on hover, making the element feel “lifted.”

🛠️ Pro Tips for Using Box Shadows

Tip	Why It Matters
Use `rgba()` for soft, transparent shadows	Prevents harsh black outlines
Combine with `border-radius`	Creates smooth, modern designs
Avoid excessive shadow stacking	Keeps performance and design clean
Test contrast on dark/light backgrounds	Ensures visibility and consistency

🔹 Multiple Shadows

You can add more than one shadow by separating them with commas:

.multi-shadow {
  box-shadow: 2px 2px 5px #999, -2px -2px 5px #ccc;
}

This adds depth from multiple angles.

✅ Final Thoughts

The box-shadow property is one of the most versatile CSS tools for styling <div> elements. Whether you’re creating subtle elevation, inner recess, or interactive hover effects, shadows make your layout feel polished and professional.

🧪 Summary

Technique	Use Case
`box-shadow`	Add external or inset shadows
`inset` keyword	Create internal shadow effects
`hover` with transition	Add interactivity
`multiple shadows`	Achieve layered depth

🔹 What is box-shadow?