# Cristal + grano de ruido

También llamado: cristal granulado, UI esmerilada con grano, UI de gradiente con ruido, web con grano de película, cristal texturizado  
Época: 2022 en adelante (corrección del glassmorphism limpio; era de Fontshare, Fey, Family wallet)  
Página: https://designforai.dev/es/style/glass-noise-grain

## Rasgos

- paneles de cristal como en el glassmorphism pero con una textura de grano de película encima de todo
- gradientes granulados en vez de suaves; el ruido es el acabado, no un fallo
- paletas más oscuras y sombrías que el cristal de 2020: carbón, verde profundo, azul tinta con una luz cálida
- bordes finos de 1px a baja alfa, sombras suaves y amplias
- tipografía con más carácter: una grotesk con rarezas o un acento en serif cursiva
- movimiento contenido; el grano hace el trabajo visual
- a menudo monocromo más un color de resplandor

Paleta: #0e0f12 página, #16181d panel, rgba(255,255,255,0.1) canto, #e8e6df texto, #9a9890 apagado, #f2b880 resplandor cálido

Tipografía: Instrument Sans o Geist para la UI, Instrument Serif cursiva para acentos, JetBrains Mono para etiquetas pequeñas; títulos 500 a 40-64px con -0.02em, cuerpo 400 a 16px

## Haz

- genera el grano una sola vez como filtro SVG feTurbulence (baseFrequency 0.65-0.9, numOctaves 3) y aplícalo como capa fija a página completa al 6-10% de opacidad
- coloca el grano por encima del cristal pero por debajo del texto, con pointer-events none y mix-blend-mode overlay
- mantén la paleta en grises más un resplandor cálido para que el grano se lea como material, no como ruido

## Evita

- no uses un mosaico PNG de ruido mayor de 200x200; cuesta bytes y se repite de forma visible
- no apiles grano sobre fotos cargadas; se convierte en barro
- no dejes que la alfa del grano supere el 12%; el texto se vuelve borroso

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

## Semilla 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

Construye el sitio en estilo cristal granulado. Página #0e0f12 con un resplandor radial cálido arriba a la derecha (rgba(242,184,128,0.25), 60vw, blur(120px)). Añade una capa fija a página completa: un SVG inline con feTurbulence (fractalNoise, baseFrequency 0.8, numOctaves 3) como background, opacity 0.08, mix-blend-mode overlay, pointer-events none, z-index por encima de los paneles pero por debajo del texto mediante una capa de apilamiento aparte. Paneles: background rgba(22,24,29,0.7), backdrop-filter blur(18px), borde 1px rgba(255,255,255,0.1), border-radius 14px, box-shadow 0 20px 60px rgba(0,0,0,0.45). Texto #e8e6df, apagado #9a9890, acento de resplandor #f2b880 para enlaces y el botón primario (que usa relleno #f2b880 con texto #0e0f12). Fuentes: Instrument Sans 500 para títulos a 56/36/24px con -0.02em, Instrument Serif cursiva para una palabra de acento por título al mismo tamaño, cuerpo 400 a 16px, JetBrains Mono 12px en mayúsculas para etiquetas. Movimiento: 250ms ease en hover; el resplandor respira durante 8s (opacity de 0.2 a 0.3).