# Layered Shadows

**SHOULD** · **ID:** `design-layered-shadows` · **Category:** design
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/design-layered-shadows

> SHOULD: Layered shadows (ambient + direct)

Mimic ambient and direct light with at least two layers

Natural shadows have both ambient (soft, diffuse) and direct (sharper, darker) components. Use two box-shadow declarations: one large and subtle for ambient light, one smaller and darker for direct light. This creates depth and realism.

## Bad — do not do this

`design-layered-shadows-bad`

```tsx
export function LayeredShadowsBad() {
  return (
    <div className="space-y-4">
      {/* Light plate: black-based shadows are unreadable on the dark theme. */}
      <div className="rounded-xl bg-neutral-100 p-8 flex justify-center">
        <div
          className="w-48 h-28 bg-white rounded-lg flex items-center justify-center"
          style={{ boxShadow: '0 4px 6px rgba(0, 0, 0, 0.3)' }}
        >
          <p className="text-sm text-neutral-700 text-center px-4">Single flat shadow</p>
        </div>
      </div>
      <p className="text-xs text-destructive">
        One hard shadow at a single offset. The edge is abrupt and the card looks stuck to the page rather than lifted
      </p>
    </div>
  );
}
```

## Good — do this

`design-layered-shadows-good`

```tsx
export function LayeredShadowsGood() {
  return (
    <div className="space-y-4">
      {/* Same light plate as the Bad example, so the comparison is fair. */}
      <div className="rounded-xl bg-neutral-100 p-8 flex justify-center">
        <div
          className="w-48 h-28 bg-white rounded-lg flex items-center justify-center"
          style={{
            boxShadow:
              '0 1px 2px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.06), 0 12px 24px rgba(0,0,0,0.05)',
          }}
        >
          <p className="text-sm text-neutral-700 text-center px-4">Layered shadow</p>
        </div>
      </div>
      <p className="text-xs text-success">
        Several shadows stacked, each larger and softer than the last. Light falls off gradually, the way it does in
        the real world
      </p>
    </div>
  );
}
```

## References

- [Material Design Shadows](https://m2.material.io/design/environment/light-shadows.html)