Vetro liquido

Quattro ingredienti, zero librerie

Il vetro credibile non è «tanta sfocatura». Sono quattro cose insieme: una tinta chiara e bassa, un backdrop-filter che sfoca e satura (la saturazione è metà del trucco), un orlo che raccoglie la luce sui bordi, e un riflesso che si accende dove passa il dito.

.vetro{
  position: relative;
  isolation: isolate;            /* niente z-index che scappa */
  background: rgba(255,255,255,.42); /* tinta chiara, bassa */

  /* il cuore: sfoca E satura il fondo */
  backdrop-filter: blur(16px) saturate(1.9);
  -webkit-backdrop-filter: blur(16px) saturate(1.9);

  border-radius: 22px;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.9) inset, /* orlo = luce */
    0 -1px 0 0 rgba(255,255,255,.28) inset,
    0 18px 40px -18px rgba(0,0,0,.5);  /* stacco */
}

/* Un border sfumato riempie il disco. L'orlo
   vero è una cornice ritagliata con due maschere. */
.vetro::before{
  content:""; position:absolute; inset:0;
  border-radius:inherit; pointer-events:none;
  padding:1.4px;                /* spessore orlo */
  background:linear-gradient(var(--ang,140deg),
    rgba(255,255,255,.92) 0%, transparent 38%,
    transparent 62%, rgba(255,255,255,.28) 100%);
  mask:linear-gradient(#000 0 0) content-box,
       linear-gradient(#000 0 0);
  mask-composite:exclude; -webkit-mask-composite:xor;
}

.vetro::after{
  content:""; position:absolute; inset:0;
  border-radius:inherit; pointer-events:none;
  background:radial-gradient(300px circle
    at var(--mx,30%) var(--my,20%),
    rgba(255,255,255,.5), transparent 62%);
  opacity:0; transition:opacity .3s ease;
}
.vetro:hover::after, .vetro:focus-within::after{opacity:1}

/* JS: aggiorna --mx/--my col puntatore */
el.addEventListener("pointermove", e => {
  const r = el.getBoundingClientRect();
  el.style.setProperty("--mx",
    (e.clientX-r.left)/r.width*100 + "%");
  el.style.setProperty("--my",
    (e.clientY-r.top)/r.height*100 + "%");
});

Regular e Clear, mai mescolate

Apple ne prevede due sole. Regular è leggibile su qualunque fondo ed è quella che si usa quasi sempre. Clear è più trasparente e pretende uno strato che scurisce sotto: va solo dove sotto ci sono immagini vere. Fuori da un contesto fotografico, Clear fa sparire il testo.

.vetro.clear{
  background:rgba(255,255,255,.16); /* più trasparente */
  backdrop-filter:blur(9px) saturate(2.3);
  -webkit-backdrop-filter:blur(9px) saturate(2.3);
}
/* obbligatorio con Clear: velo scuro sotto
   il contenuto, o il testo non si legge. */
.vetro.clear .sotto{
  content:""; position:absolute; inset:0;
  border-radius:inherit; z-index:-1;
  background:linear-gradient(180deg,
    rgba(0,0,0,.30), rgba(0,0,0,.46));
}

Dipingerlo, o rifrangerlo davvero

La rifrazione vera esiste: una mappa di spostamento data a feDisplacementMap dentro backdrop-filter. Le righe dietro si piegano sul bordo, come nel vetro reale. Funziona ed è bellissima — ma ha due prezzi. Accendila e giudica.

Rifrazione spenta — questo è il vetro dipinto, e gira dappertutto.

Il verdetto onesto: sul web la rifrazione vera lasciala stare. Costa ~27 volte tanto, si vede solo su Chrome, e su un telefono è un tasto che risponde dopo mezzo secondo. Quello che l’occhio riconosce come «vetro» — orlo, saturazione, blur basso — non costa nulla. La tecnica completa è nel pezzo di kube.io, utile per capire perché non usarla.

Dove il vetro va, e dove rovina tutto

Dalla sessione Meet Liquid Glass (WWDC 25). Contano perché la tentazione è metterlo ovunque, e il risultato è peggiore che non metterlo affatto.

• ✓

  Solo sul livello che galleggia

  Barre, pannelli, comandi sospesi sopra il contenuto. Sul contenuto stesso would make it compete with other elements and muddy the hierarchy.

• ✕

  Mai vetro sopra vetro

  Always avoid glass on glass. Se un elemento sta sopra il vetro, usa riempimenti e trasparenza — non un secondo strato.

• !

  Tinta col contagocce

  When every element is tinted, nothing stands out. Il colore serve a far risaltare una cosa sola.

• ✓

  Il contenuto si dissolve, non si taglia

  Lo scroll edge effect: quello che scorre sotto la barra sfuma entrando, invece di sparire di netto contro un bordo.

Quattro trappole, e come uscirne

Non vengono dalla documentazione: vengono da progetti veri in cui erano scattate. Ognuna ha la sua uscita.

• ✕

  Su un’app scura non si vede — e non è colpa del vetro

  In un’app quasi-nera la luminosità del fondo era 0,0036 su 1: attraverso il materiale passava quasi-nero su quasi-nero. Il filtro funzionava, non c’era niente da rifrangere.

  Uscita: metti bagliori tenui dietro il vetro (come le isole scure di questa pagina). Senza qualcosa di vivo dietro, non è vetro.

• !

  Il vetro si mangia il contrasto

  Il colore che scorre dietro arriva fino al testo sopra: un’etichetta scendeva da 5,15 a 3,82 di contrasto quando passava un tasto arancione — sotto la soglia AA.

  Uscita: misura il contrasto componendo l’alpha strato per strato, non a occhio. Se il fondo è vario, tieni la tinta più opaca sotto il testo.

• ✕

  Il vetro imprigiona i «fixed»

  Un elemento con backdrop-filter diventa il contenitore di ogni discendente in position:fixed: una tenda a schermo intero esce grande quanto la barra, non quanto lo schermo.

  Uscita: metti il backdrop-filter su uno pseudo-elemento (::before), non sul contenitore.

• !

  Due fasce sfocate non sono «l’effetto iOS»

  Il blur da solo lo faceva già Windows Vista. Quello che si riconosce di iOS 26 sono la forma e il movimento: la barra che si stacca in una pastiglia sospesa, la compressione a 0,95 al tocco, le molle da 0,3 s.

  Uscita: spendi il budget su forma e animazione, non su più sfocatura.

Tre interruttori: su iPhone li scatta il sistema, sul web tu

Su iOS li applica il sistema operativo. Sul web vanno scritti a mano: senza, escludi chi ha impostato il telefono per meno trasparenza, più contrasto o niente animazioni. Sono tre media query, in fondo al foglio.

/* meno trasparenza: spegni il blur, alza la tinta */
@media (prefers-reduced-transparency: reduce){
  .vetro{ backdrop-filter:none; -webkit-backdrop-filter:none;
          background:var(--fondo-solido); }
}
/* più contrasto: via i veli, bordo netto */
@media (prefers-contrast: more){
  .vetro{ background:var(--fondo-solido);
          border:1px solid var(--ink); }
}
/* niente moto: ferma derive e molle */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

Quando usarlo, quando no

Il vetro è vistoso per costruzione. Sta bene dove la sua vistosità aiuta a capire cosa galleggia sopra cosa, e diventa rumore ovunque il contenuto debba solo essere letto.

Tutto il necessario, in un blocco

Copia, incolla, metti la classe .vetro su una barra o un pannello, e aggiungi due bagliori dietro. Include già l’accessibilità.

:root{ --fondo-solido:#FAF6EE; }

.vetro{
  position:relative; isolation:isolate;
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(16px) saturate(1.9);
  -webkit-backdrop-filter:blur(16px) saturate(1.9);
  border-radius:22px;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.9) inset,
    0 -1px 0 0 rgba(255,255,255,.28) inset,
    0 18px 40px -18px rgba(0,0,0,.5);
}
.vetro::before{                /* orlo di luce */
  content:""; position:absolute; inset:0; padding:1.4px;
  border-radius:inherit; pointer-events:none;
  background:linear-gradient(140deg,
    rgba(255,255,255,.92) 0%, transparent 38%,
    transparent 62%, rgba(255,255,255,.28) 100%);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude; -webkit-mask-composite:xor;
}
.vetro::after{                 /* riflesso al dito (--mx/--my via JS) */
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(300px circle at var(--mx,30%) var(--my,20%),
    rgba(255,255,255,.5), transparent 62%);
}
.vetro:hover::after, .vetro:focus-within::after{ opacity:1 }

/* accessibilità: non è opzionale */
@media (prefers-reduced-transparency: reduce){
  .vetro{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--fondo-solido); }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}