DEV Community

Cover image for CSS Box Shadow Layers: How to Create Realistic Depth
kandz
kandz

Posted on Originally published at tools.kandz.me

CSS Box Shadow Layers: How to Create Realistic Depth

#webdev #css #design #frontend

One box-shadow is easy. Layering multiple shadows to create real depth? That's where it gets messy.

A single shadow looks flat and artificial. Real-world shadows have multiple penumbras — closer to the object, darker and sharper; further away, softer and lighter.

In this guide, we'll break down how to stack shadows properly, why layering works, and the gotchas that trip most developers up.

The Basic Syntax 

box-shadow: offset-x offset-y blur spread color;
Enter fullscreen mode Exit fullscreen mode
Value Purpose
offset-x Horizontal shift
offset-y Vertical shift
blur Softness of the shadow
spread Expands or shrinks the shadow
color Shadow color (use rgba for opacity)

A simple example:

.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
Enter fullscreen mode Exit fullscreen mode

This creates a subtle elevation effect.

Layering Multiple Shadows

The real power comes from stacking shadows. Separate each layer with a comma:

.card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.07),
    0 2px 4px rgba(0, 0, 0, 0.07),
    0 4px 8px rgba(0, 0, 0, 0.07),
    0 8px 16px rgba(0, 0, 0, 0.07);
}
Enter fullscreen mode Exit fullscreen mode

Each layer adds depth. The cumulative effect looks like real elevation.

Why Layering Works

Real-world shadows aren't a single blur. They're a gradient of penumbras.

By stacking shadows with increasing blur and offset, you simulate physical behavior. The result is smooth, realistic, and professional.

Inset Shadows

Add inset to place the shadow inside the element:

.pressed {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
Enter fullscreen mode Exit fullscreen mode

Useful for:

  • Input fields
  • Pressed buttons
  • Neumorphic designs

Common Gotchas

Issue Fix
Too harsh Use rgba with low opacity
Clips at edges Set overflow: visible on parent
Performance Reduce blur and layers on mobile
Dark mode Use dark rgba, not pure black

Performance Considerations

Layered shadows can impact rendering performance, especially on mobile devices. Keep these in mind:

  • Limit layers — 3-4 shadows is usually enough
  • Reduce blur radius on mobile
  • Avoid animating shadows — expensive repaints
  • Use will-change: box-shadow sparingly

Prototyping Visually

Writing layered shadows by hand is tedious. You guess values, reload, adjust, repeat.

I built a free CSS Box Shadow Layers Designer that lets you stack shadows visually and copy the CSS instantly.

👉 tools.kandz.me/box-shadow-layers

100% client-side. Nothing uploaded.

What's your approach to elevation shadows? Do you layer them or use a single shadow? Let me know in the comments.

Top comments (0)