How to Add a Box Shadow in CSS

Use box-shadow when you want an element to feel lifted off the page or stand out from the background. Shadows work well for cards, buttons, dropdowns, modals, images, and floating navigation bars.

What you’ll build or solve

You’ll learn how to add a box shadow in CSS using the standard shadow value order. You’ll also know how to create subtle depth versus stronger elevated surfaces.

When this approach works best

This approach is the right choice when an element needs more visual separation without adding borders.

Common real-world scenarios include:

• Card elevation
• Button hover states
• Dropdown menus
• Modal windows
• Floating toolbars

This is a bad idea when the design already has heavy borders, strong contrast, or too many layered surfaces.

Prerequisites

You only need:

• A basic HTML file
• A text editor
• Basic HTML and CSS knowledge

Step-by-step instructions

Step 1: Add the box-shadow property

Use the shadow values in this order: horizontal offset, vertical offset, blur, color.

<div class="card">USA pricing</div>

<style>
  .card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
</style>

For stronger elevation, increase the vertical offset and blur.

<div class="modal">France pricing</div>

<style>
  .modal {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  }
</style>

What to look for:

• Smaller blur values create sharper shadows
• Larger blur values feel softer and more modern
• Increase vertical offset for stronger lift
• Low opacity often looks cleaner than dark solid shadows
• Shadows pair well with rounded corners

Examples you can copy

Card shadow

<div class="card">UK course plan</div>

<style>
  .card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  }
</style>

Button hover depth

<button class="cta">Start lesson</button>

<style>
  .cta {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }
</style>

Floating navbar

<header class="top-nav">USA docs</header>

<style>
  .top-nav {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
</style>

Common mistakes and how to fix them

Mistake 1: Using a fully black heavy shadow

What the reader might do:

.card {
  box-shadow: 0 10px 20px black;
}

Why it breaks: harsh solid shadows often look unnatural and visually heavy.

Corrected approach:

.card {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

Mistake 2: Using huge blur values everywhere

What the reader might do:

.card {
  box-shadow: 0 20px 100px rgba(0, 0, 0, 0.3);
}

Why it breaks: oversized blur can make the UI look muddy and reduce edge clarity.

Corrected approach:

.card {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

Mistake 3: Adding shadows to too many surfaces

What the reader might do:

.card,
.button,
.nav,
.footer,
.section {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Why it breaks: when every element floats, the hierarchy becomes unclear.

Corrected approach:

Use shadows only on the most important elevated surfaces like cards, dropdowns, and modals.

Troubleshooting

If the shadow feels too dark, lower the alpha opacity.

If the shadow looks blurry and messy, reduce the blur radius.

If the UI feels flat, slightly increase the vertical offset.

If the page feels visually noisy, remove shadows from lower-priority elements.

Quick recap

• Use box-shadow to add depth
• Follow offset, blur, color order
• Use soft low-opacity shadows
• Increase blur and offset for stronger elevation
• Use shadows selectively for hierarchy