Multiple Box Shadow CSS: When and How to Use Layered Shadows

July 14, 2026

Quick Answer

CSS supports multiple box shadows in one declaration by separating each shadow with a comma.
Use layered shadows when one layer cannot provide both edge definition and realistic depth.
Place the smallest, sharpest shadow first and the wider, softer shadow after it.
Use a multiple box shadow generator to preview each layer before copying the final CSS.

A single shadow can separate an element from its background. Multiple shadows can make the elevation feel more natural by combining a tight contact shadow with a wider ambient shadow.

This guide explains how multiple box shadow CSS works, when layered shadows are useful and how to build reusable shadow presets for cards, buttons, dropdowns and modals.

In This Guide

Syntax When to Use It Generator Workflow CSS Examples Shadow System Mistakes FAQs

How Multiple Box Shadow CSS Works

To apply more than one shadow, add a comma-separated list to the same box-shadow property.

box-shadow:
  0 1px 2px rgb(15 23 42 / 8%),
  0 8px 24px rgb(15 23 42 / 12%);

The first shadow is painted above the shadows that follow it. This means ordering matters when layers overlap.

Easy way to remember the order

Write the tight contact shadow first, followed by the wider ambient shadow. The first layer defines the edge; the second creates depth.

Single Shadow vs Layered Shadow

Approach	Best for	Main limitation
Single shadow	Simple cards, borders and restrained interfaces	Can become too dark when asked to create both definition and depth
Multiple shadows	Floating menus, modals, elevated cards and refined UI systems	Requires consistent layers and careful opacity control

When Should You Use Layered Shadows?

Cards need subtle separation

Combine a narrow shadow for the edge with a soft layer that separates the card from the page without making it appear to float too high.

Menus must appear above content

Dropdowns and popovers need stronger visual elevation than standard content cards, especially when they overlap text or images.

A button needs colored depth

A neutral contact shadow can be combined with a wider transparent version of the button color.

Inner and outer effects are required

You can combine inset and outer shadows to create pressed controls, recessed panels or more detailed surface effects.

Avoid adding layers simply because CSS allows it. Each shadow should have a clear role: edge definition, ambient depth, colored emphasis or an inner surface effect.

How to Use a Multiple Box Shadow Generator

CSSPeek’s free Box Shadow Lab is designed for building layered shadows visually and copying the finished CSS.

Create the contact shadow

Begin with a small vertical offset, short blur and low opacity. This first layer should define the component edge without looking like a border.

Add the ambient layer

Use a larger Y offset and blur radius. Keep the opacity controlled so the shadow fades naturally into the background.

Test the real background

Preview the effect against the same surface color used in your website. Shadows can appear stronger on white and weaker on dark or tinted backgrounds.

Copy and reuse the CSS

Copy the comma-separated declaration and save it as a reusable CSS custom property instead of repeating raw values across components.

CSSPeek Box Shadow Lab

Build every shadow layer visually.

Create layered shadows, compare different elevation levels and copy clean CSS without repeatedly editing blur, spread and opacity values by hand.

Open Multiple Box Shadow Generator →

Multiple Box Shadow CSS Examples

1. Clean dashboard card

.card {
  box-shadow:
    0 1px 2px rgb(15 23 42 / 6%),
    0 8px 24px rgb(15 23 42 / 8%);
}

The first layer adds definition close to the card. The second creates a softer elevation effect.

2. Floating dropdown menu

.dropdown {
  box-shadow:
    0 2px 4px rgb(15 23 42 / 8%),
    0 12px 28px -6px rgb(15 23 42 / 20%);
}

The negative spread keeps the larger layer from expanding too heavily around the sides.

3. Primary button with colored depth

.primary-button {
  box-shadow:
    0 1px 2px rgb(15 23 42 / 14%),
    0 8px 18px rgb(79 70 229 / 28%);
}

The neutral layer keeps the button grounded, while the colored layer reinforces the button’s visual identity.

4. Inner and outer shadow combination

.control {
  box-shadow:
    inset 0 1px 2px rgb(15 23 42 / 12%),
    0 1px 2px rgb(15 23 42 / 8%);
}

This can work for recessed controls, but it should not replace a visible keyboard focus indicator.

5. Modal elevation

.modal {
  box-shadow:
    0 4px 8px rgb(15 23 42 / 10%),
    0 24px 64px -12px rgb(15 23 42 / 30%);
}

Use stronger elevation for components that must clearly appear above the rest of the interface.

Turn Layered Shadows into a Reusable System

Save approved shadows as CSS custom properties. This keeps elevation consistent and makes future design changes easier.

:root {
  --shadow-low:
    0 1px 2px rgb(15 23 42 / 6%),
    0 4px 12px rgb(15 23 42 / 6%);

  --shadow-medium:
    0 2px 4px rgb(15 23 42 / 8%),
    0 12px 28px -6px rgb(15 23 42 / 16%);

  --shadow-high:
    0 4px 8px rgb(15 23 42 / 10%),
    0 24px 64px -12px rgb(15 23 42 / 28%);
}

.card {
  box-shadow: var(--shadow-low);
}

.dropdown {
  box-shadow: var(--shadow-medium);
}

.modal {
  box-shadow: var(--shadow-high);
}

You can explore other focused utilities from the CSSPeek tools collection or use the CSSPeek Chrome extension to understand the CSS and layout decisions used on live pages.

Using Multiple Shadows in Hover Transitions

When transitioning between shadow states, keep the number and type of layers consistent. This helps the browser pair corresponding shadows more predictably.

.card {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;

  box-shadow:
    0 1px 2px rgb(15 23 42 / 6%),
    0 4px 12px rgb(15 23 42 / 6%);
}

.card:hover {
  transform: translateY(-2px);

  box-shadow:
    0 2px 4px rgb(15 23 42 / 8%),
    0 14px 30px rgb(15 23 42 / 12%);
}

Avoid animating many large blurred shadows across a large number of elements. Use layered elevation selectively on components where the visual feedback adds real value.

Common Layered Shadow Mistakes

Using several layers with the same blur, opacity and offset.
Making every shadow dark enough to be noticed individually.
Changing the apparent light direction between components.
Adding too many elevation levels to the same interface.
Copying shadow CSS without testing the actual page background.
Using box shadow as the only keyboard focus indicator.
Applying expensive animated shadows to many large elements at once.

Create layered CSS shadows without guessing.

Use CSSPeek Box Shadow Lab to add, adjust and compare multiple layers before copying the final production-ready CSS.

Build a Multiple Box Shadow →

Frequently Asked Questions

Can CSS have multiple box shadows?

Yes. Add multiple shadow definitions to one box-shadow property and separate each layer with a comma.

Which multiple box shadow is displayed on top?

The first shadow listed is painted above the shadows that follow it. Place the tighter contact layer first and wider layers later.

Can I mix inset and outer box shadows?

Yes. An inset shadow and one or more outer shadows can be included in the same comma-separated declaration.

How many box shadow layers should I use?

Two layers are enough for most modern UI components: one tight contact shadow and one wider ambient shadow.

How can I copy multiple box shadow CSS?

Build each layer in a multiple box shadow generator, preview the combined result and copy the final comma-separated box-shadow declaration.

Share:X / Twitter LinkedIn Hacker News