Dim, separate, materialize

Dim modal tasks, offset panels without a scrim, grow blur with scale.

From apple-design, §12 Materials & depth.

Modal vs inspector

Tap a file and rename it, then swap the treatments.

Modal: dim + push backGood
Files4 items
scrim + scale(var(--push))
Inspector: no scrimGood
Files4 items
translateX + backdrop blur, no scrim
.stage[data-open="true"] .scrim { opacity: .32; pointer-events: auto; }
.stage[data-open="true"] .page  { transform: scale(.94); }
.page, .scrim { transition: transform 300ms var(--ease-in-out), opacity 250ms var(--ease-out); }

.inspector {
  inset: 10px 10px 10px auto;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  transform: translateX(calc(100% + 16px));
  transition: transform 280ms var(--ease-out);
}
.stage[data-open="true"] .inspector { transform: none; }

Stacked sheets

Push three levels and compare the sense of depth.

Page only
Sheets pile up flatBad
Inbox12 unread
parents: unchanged
Parents dim and recedeGood
Inbox12 unread
scale(1 - d × step)shade: d × dim
.layer {
  transform-origin: 50% 0;
  transform: translateY(calc(var(--d) * -6px)) scale(calc(1 - var(--d) * .05));
  transition: transform 300ms var(--ease-out);
}
.layer .shade {
  opacity: min(calc(var(--d) * .16), .6);
  transition: opacity 300ms var(--ease-out);
}
.sheet:not([data-open="true"]) { transform: translateY(110%); }

Materialize, don’t just fade

Show both cards. Use slow motion to see the blur grow.

Opacity-only fadeBad
transition: opacity
Blur + scale togetherGood
blur(0 → 20px) + scale(.96 → 1)
.glass {
  background: color-mix(in srgb, var(--card) 55%, transparent);
  opacity: 0;
  transform: scale(.96);
  backdrop-filter: blur(0px) saturate(100%);
  transition:
    opacity 180ms var(--ease-out),
    transform 300ms var(--ease-out),
    backdrop-filter 300ms var(--ease-out);
}
.glass[data-open="true"] {
  opacity: 1;
  transform: none;
  backdrop-filter: blur(20px) saturate(180%);
}

Why it matters, pros and cons

Why it matters

A scrim says the rest can wait. Blur growing with scale reads as glass arriving.

Pros

  • Blocking vs non-blocking is legible instantly.
  • Stacked sheets show depth and a way home.
  • Inspectors keep the page live.

Cons

  • Animating backdrop-filter is expensive on low-end devices.
  • Past three levels, rethink the flow instead.
  • Scrims hide context the task may need.