# Glassmorphism

También llamado: interfaz de cristal esmerilado, tarjetas de cristal, UI con backdrop blur, UI translúcida  
Época: 2020-2023 (Windows Vista Aero e iOS 7 como antecesores; bautizado por Michal Malewicz en 2020)  
Página: https://designforai.dev/es/style/glassmorphism

## Rasgos

- paneles translúcidos (blanco al 8-20% de alfa) sobre un fondo colorido y desenfocado
- `backdrop-filter: blur(16-24px)` es todo el truco; nada funciona sobre un fondo plano
- borde claro de 1px (blanco al 25-40%) para simular el canto del cristal
- sombras suaves y amplias en un color tintado, nunca negro puro
- radio de 16-24px, padding interior generoso
- el fondo lleva manchas de color desenfocadas para que el blur tenga algo que difuminar
- la tipografía se mantiene nítida y con alto contraste sobre el cristal

Paleta: #0f172a base de página, #7c3aed y #06b6d4 manchas de fondo, rgba(255,255,255,0.12) relleno del cristal, rgba(255,255,255,0.35) canto del cristal, #f8fafc texto

Tipografía: Manrope o DM Sans para todo; títulos 600, cuerpo 400 a 16px; evita los pesos finos sobre cristal (desaparecen contra el blur)

## Haz

- pon dos o tres formas grandes de color desenfocadas detrás del layout para que el blur tenga profundidad que revelar
- limita los paneles de cristal a dos niveles como máximo: tarjeta y un overlay flotante
- prueba cada color de texto contra la zona más cargada del fondo

## Evita

- no apiles cristal sobre cristal sobre cristal; se convierte en barro
- no uses cristal sobre una página blanca o negra lisa; no hay nada que desenfocar
- no olvides un respaldo sólido para navegadores sin backdrop-filter

Conocido por: Apple macOS Big Sur, Microsoft Fluent Acrylic, paneles de Stripe (parcial)

## Semilla CSS

```css
:root{--bg:#0f172a; --fg:#f8fafc; --accent:#7c3aed; --glass:rgba(255,255,255,0.12); --edge:rgba(255,255,255,0.35); --radius:20px; --shadow:0 8px 32px rgba(31,38,135,0.37); --font:'Manrope',sans-serif}
```

## Prompt

Construye el sitio en estilo glassmorphism. Fondo de página #0f172a con tres grandes manchas radiales desenfocadas en #7c3aed, #06b6d4 y #ec4899 (filter: blur(80px), opacity 0.6) colocadas detrás del contenido. Cada tarjeta, barra de navegación y modal es un panel de cristal: background rgba(255,255,255,0.12), backdrop-filter blur(20px) saturate(160%), borde 1px rgba(255,255,255,0.35), border-radius 20px, box-shadow 0 8px 32px rgba(31,38,135,0.37). Texto #f8fafc, texto secundario rgba(248,250,252,0.7). Fuente Manrope: títulos 600 a 40/28/20px, cuerpo 400 a 16px, line-height 1.6. Botones: #7c3aed sólido con texto blanco, radio 12px, el hover eleva 2px con una sombra más brillante. Espaciado en escala de 8px, padding de tarjeta 24-32px. Proporciona un respaldo sólido (rgba(15,23,42,0.85)) cuando backdrop-filter no esté soportado. Movimiento: 200ms ease-out solo en hover; sin animación disparada por scroll.