# Glass sidebar — soft colour ground, black veil, no blur

Learned 2026-08-26 applying Praveen Jose's "Glassmorphism — Mac sidebar
navigation" (Dribbble shot 17942973, 10 likes / 3.1k views) to the Home
Assistant sidebar. Render-verified: the recipe ships in
`Domains/mielina/apps/homeassistant/mielina.yaml` and was read back off the
live page.

- **The measurement that defines it**: sample one pixel of the panel and one
  of the ground just outside it, at the same height. Here rgb(41,86,120) over
  rgb(70,150,195) — a transmission of 0.586/0.573/0.615 per channel, so a
  **black veil at ~41%**. That single ratio is the whole material; every
  adjective about "frostiness" is downstream of it.
- **No `backdrop-filter`.** The reference's ground is a Big Sur wallpaper —
  already soft — so its blur contributes almost nothing, and the effect
  survives intact as `linear-gradient(rgba(0,0,0,.40), rgba(0,0,0,.40))`
  stacked over the ground. This matters wherever a blur budget forbids glass
  on chrome: the look is reproducible at zero blur. Reach for blur only when
  the ground is sharp — a photograph, text, a dense grid.
- **The ground is the component.** Glass over a flat dark page shows nothing
  (SKILL.md failure mode 4). Ours is three radial gradients of one bloom pair
  at .62/.55/.20, which is what the veil has to darken. Build the ground
  first, then veil it.
- **Nav items carry no pill.** Icon and label sit straight on the glass, far
  apart — measured 157px apart in a 4800-wide render against an 892-wide
  panel, i.e. 17.6% of panel width. Only the selected item is marked, and
  lightly: white at 8% plus a 1px inset rim in the accent.
- **connotes**: the veil says "this chrome is a pane you are looking through,
  and the app's colour is behind it" — the ground reads as the thing that is
  real and the panel as the thing that is placed. Removing the pill is the
  same claim: a pill would make the item an object sitting on the glass, and
  the reference wants the label to be printed on it.