# Vidro + granulado

Também chamado de: vidro granulado, UI de grão fosco, UI de gradiente com ruído, web com grão de filme, vidro texturizado  
Era: 2022 em diante (correção ao glassmorphism limpo; era do Fontshare, Fey, Family wallet)  
Página: https://designforai.dev/pt/style/glass-noise-grain

## Traços

- painéis de vidro como no glassmorphism, mas com uma textura de grão de filme por cima de tudo
- gradientes granulados em vez de lisos; o ruído é o acabamento, não um bug
- paletas mais escuras e sombrias que o vidro de 2020: carvão, verde profundo, azul tinta com uma luz quente
- bordas finas de 1px em alpha baixo, sombras suaves e largas
- tipografia com mais personalidade: uma grotesca com excentricidades ou um acento em serifa itálica
- movimento contido; o grão faz o trabalho visual
- muitas vezes monocromático mais uma cor de brilho

Paleta: #0e0f12 página, #16181d painel, rgba(255,255,255,0.1) aresta, #e8e6df texto, #9a9890 atenuado, #f2b880 brilho quente

Tipografia: Instrument Sans ou Geist para UI, Instrument Serif itálico para acentos, JetBrains Mono para labels pequenos; títulos 500 a 40-64px com -0.02em, corpo 400 a 16px

## Faça

- gere o grão uma vez como filtro SVG feTurbulence (baseFrequency 0.65-0.9, numOctaves 3) e aplique-o como overlay fixo de página inteira a 6-10% de opacidade
- coloque o grão acima do vidro mas abaixo do texto, usando pointer-events none e mix-blend-mode overlay
- mantenha a paleta em cinzas mais um brilho quente para o grão ler como material, não como ruído

## Evite

- não use um tile PNG de ruído maior que 200x200; custa bytes e repete visivelmente
- não empilhe grão sobre fotos movimentadas; vira lama
- não deixe o alpha do grão passar de 12%; o texto fica embaçado

Conhecido por: Fey, Family wallet, Fontshare, app Reflect, Cosmos

## Semente CSS

```css
:root{--bg:#0e0f12; --panel:rgba(22,24,29,0.7); --edge:rgba(255,255,255,0.1); --fg:#e8e6df; --muted:#9a9890; --glow:#f2b880; --radius:14px; --grain:0.08; --font:'Instrument Sans',sans-serif}
```

## Prompt

Construa o site em estilo vidro granulado. Página #0e0f12 com um brilho radial quente no canto superior direito (rgba(242,184,128,0.25), 60vw, blur(120px)). Adicione um overlay fixo de página inteira: um SVG inline com feTurbulence (fractalNoise, baseFrequency 0.8, numOctaves 3) como background, opacity 0.08, mix-blend-mode overlay, pointer-events none, z-index acima dos painéis mas abaixo do texto via uma camada de empilhamento separada. Painéis: background rgba(22,24,29,0.7), backdrop-filter blur(18px), borda 1px rgba(255,255,255,0.1), border-radius 14px, box-shadow 0 20px 60px rgba(0,0,0,0.45). Texto #e8e6df, atenuado #9a9890, acento de brilho #f2b880 para links e o botão primário (que usa preenchimento #f2b880 com texto #0e0f12). Fontes: Instrument Sans 500 para títulos a 56/36/24px com -0.02em, Instrument Serif itálico para uma palavra de acento por título no mesmo tamanho, corpo 400 a 16px, JetBrains Mono 12px em caixa alta para labels. Movimento: 250ms ease no hover; o brilho respira ao longo de 8s (opacity de 0.2 a 0.3).