Translucent materials

Float chrome as translucent layers; never stack glass on glass.

From apple-design, §12 Materials & depth.

Chrome floats over content

Scroll a feed and watch photos pass under the bars.

Opaque barsBad
Library
background: var(--card)
Translucent materialGood
Library
rgba(255,255,255,0.6) + blur(20px)
.toolbar {
  position: absolute; inset: auto 0 0;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px) saturate(180%);
}
.feed { padding-bottom: 52px; }

Never light on light

Open the menus, then move the background.

Glass on glassBad
menu: rgba(255,255,255,.4) + blur(3px)
Solid menu on glassGood
menu: var(--card) + shadow
.sheet { background: rgba(255,255,255,.6); backdrop-filter: blur(20px) saturate(180%); }
.sheet .menu {
  background: var(--surface);
  box-shadow: 0 12px 32px rgb(0 0 0 / .18);
}

Bigger surfaces read thicker

Drag from chip to sheet, then add busy content.

Same at every sizeBad
Chip
blur(12px) · shadow 0 1px 3px
Blur scales with sizeGood
Chip
blur(11px) · shadow 0 6px 17px
.surface {
  backdrop-filter: blur(calc(6px + 26px * var(--t))) saturate(180%);
  box-shadow: 0 calc(2px + 22px * var(--t)) calc(6px + 54px * var(--t))
              rgb(0 0 0 / calc((.10 + .16 * var(--t)) * var(--busy)));
}

Why it matters, pros and cons

Why it matters

Translucent chrome floats instead of walling off. Glass on glass loses contrast.

Pros

  • Content uses the full viewport.
  • You see what slides under the bar.
  • Hierarchy from material, not more lines.

Cons

  • backdrop-filter re-blurs every scroll frame; keep regions small.
  • Legibility depends on what sits behind.
  • Dense tables read better under a solid header.