Components / Display & Media / Glass Panel

Glass Panel beta

A translucent panel that floats over bright surfaces — the menu in front of the aurora.

Preview

Ranked by impact Today

1Pricing reply98

2Renewal follow-up87

3Thursday demo brief76

Uses: Aurora — include its CSS alongside this one.

<div class="k-aurora" style="max-width:430px">
  <i class="b1"></i><i class="b2"></i><i class="b3"></i>
  <div style="position:relative;padding:20px">
    <div class="k-glass" data-theme="dark">
      <div class="k-glass-h">Ranked by impact <span>Today</span></div>
      <div class="k-glass-row"><span class="k-glass-num">1</span>Pricing reply<span class="k-glass-val">98</span></div>
      <div class="k-glass-row"><span class="k-glass-num">2</span>Renewal follow-up<span class="k-glass-val">87</span></div>
      <div class="k-glass-row"><span class="k-glass-num">3</span>Thursday demo brief<span class="k-glass-val">76</span></div>
    </div>
  </div>
</div>

.k-glass{background:color-mix(in srgb,var(--k-bg) 68%,transparent);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);border:1px solid color-mix(in srgb,var(--k-on-color) 32%,transparent);border-radius:14px;box-shadow:0 18px 40px -18px rgba(0,0,0,.45);color:var(--k-ink);font-family:var(--k-font);padding:16px;text-align:left}
.k-glass-h{display:flex;align-items:baseline;justify-content:space-between;font-size:12px;font-weight:600;letter-spacing:.04em}
.k-glass-h span{font-weight:500;color:var(--k-ink-3);letter-spacing:0}
.k-glass-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid color-mix(in srgb,var(--k-on-color) 16%,transparent);font-size:13px}
.k-glass-row:first-of-type{margin-top:8px}
.k-glass-num{font-family:var(--k-mono);font-size:11px;color:var(--k-ink-3);width:13px}
.k-glass-val{margin-left:auto;font-size:11.5px;color:var(--k-ink-3)}

Usage

For panels that sit on photography, gradients or the Aurora: menus, summaries, now-playing cards. Needs a busy surface behind it; on a plain page it is just a card.

Accessibility

The blur is decorative; text sits on a 68% ground so contrast holds in both themes. Do not put small print on the thinnest part of the blur.

Used in these blocks

Use Cases

A numbered switcher: pick the reader you are, and the picture changes with the story.

Related parts

Aspect Ratio beta

A box that holds its shape — 16/9 for video, 4/3 for photos, 1/1 for avatars — whatever fills it.

ratiomediaresponsive

Avatar beta

Initials first, photo when there is one. Three sizes, a status dot, and a stacking group.

userprofileinitials

Bar Chart beta

Columns for comparing a handful of values — the chart people read correctly at a glance.

chartcolumnscomparison

Card beta

The universal container: a hairline box with a header, a body and a footer that agree with each other.

containerpanel

Gauge

Heatmap