# Liquid glass

Também chamado de: Apple liquid glass, vidro do iOS 26, UI refrativa, vidro com efeito de lente  
Era: 2025 em diante (Apple WWDC 2025)  
Página: https://designforai.dev/pt/style/liquid-glass

## Traços

- vidro que se comporta como lente: as bordas refratam e clareiam, o centro fica limpo
- reflexo especular ao longo da borda superior, aro escuro sutil na inferior
- painéis em forma de pílula ou cápsula, que flutuam sobre o conteúdo em vez de emoldurá-lo
- controles se transformam e se fundem (uma tab bar vira uma única pílula ao rolar)
- o fundo é conteúdo real (fotos, mapas), não manchas decorativas
- raio muito alto (pílulas completas), tipografia fina, controles compactos
- movimento fluido e baseado em física: elástico, rápido, com leve overshoot

Paleta: guiada pelo conteúdo, mas o chrome usa rgba(255,255,255,0.18) de preenchimento, rgba(255,255,255,0.6) reflexo superior, rgba(0,0,0,0.12) aro inferior, #0a84ff acento, #ffffff texto sobre escuro, #1c1c1e texto sobre claro

Tipografia: sans do sistema (SF Pro na Apple; use Geist como substituto gratuito); labels 500 a 13-15px, títulos 600 a 22-34px; letter-spacing levemente negativo nos títulos

## Faça

- sobreponha controles de vidro a imagens ricas; o efeito vive na refração do que está atrás
- construa o reflexo com dois box-shadows inset (claro em cima, escuro embaixo) mais um leve brilho externo
- use easing de mola (cubic-bezier(0.34,1.56,0.64,1)) a 350-450ms nas transformações

## Evite

- não use em containers grandes; liquid glass é para controles e barras flutuantes, não para seções da página
- não sacrifique legibilidade pelo efeito; adicione um scrim escuro sob o texto quando o fundo for movimentado
- não imite com um branco chapado a 10%; o tratamento das bordas é o estilo inteiro

Conhecido por: Apple iOS 26 / macOS Tahoe, barras de ferramentas do Apple Music e Maps

## Semente CSS

```css
:root{--bg:#101418; --fg:#ffffff; --accent:#0a84ff; --glass:rgba(255,255,255,0.18); --hi:rgba(255,255,255,0.6); --rim:rgba(0,0,0,0.14); --radius:999px; --font:'Geist',sans-serif}
```

## Prompt

Construa o site em estilo Apple liquid glass. O conteúdo é fotografia full-bleed ou um mapa; todo o chrome flutua sobre ele em painéis em forma de cápsula (border-radius 999px para barras, 28px para sheets). Receita do vidro: background rgba(255,255,255,0.18), backdrop-filter blur(24px) saturate(180%), box-shadow inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.14), 0 10px 30px rgba(0,0,0,0.25); adicione uma borda externa de 1px rgba(255,255,255,0.25). Acento #0a84ff para a aba ativa e o botão primário. Fonte Geist: títulos 600 a 28-34px com tracking -0.02em, labels 500 a 14px. A tab bar inferior colapsa numa única pílula ao rolar com uma mola de 400ms (cubic-bezier(0.34,1.56,0.64,1)). Mantenha o vidro só nos controles; as seções da página continuam sólidas. Respeite prefers-reduced-motion desativando a transformação.