Español
Diseña superficies CSS de cristal y neumorfismo con vista previa en vivo.
Última actualización
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);*Glassmorphism* y *neumorphism* son dos estilos de superficie que ves por todas partes en el diseño web actual. **Cristal** es el aspecto esmerilado: una tarjeta translúcida que desenfoca lo que tiene detrás, normalmente sobre un gradiente colorido o una foto. **Neumorphism** es el aspecto de plástico suave: una tarjeta que parece sobresalir (o hundirse) de la superficie gracias a sombras claras y oscuras del mismo tono que el fondo.
Ambos efectos son CSS puro — sin imágenes, sin JavaScript, sin librerías. El cristal se apoya en backdrop-filter: blur() más un relleno translúcido y un borde fino. El neumorphism se construye a partir de un par de box-shadow: una un poco más oscura que la superficie y otra un poco más clara, en direcciones opuestas. La matemática es corta, pero ajustar valores a mano hasta que todo encaje lleva tiempo. Un generador se ahorra ese paso.
Esta herramienta te da sliders para cada parámetro relevante, un panel de vista previa sobre un fondo configurable (para que el cristal tenga algo que refractar) y copia del CSS en un clic. Todo en tu navegador — pega el snippet directo en tu hoja de estilos.
backdrop-filter es la propiedad que da vida al glassmorphism — desenfoca y satura lo que está *detrás* del elemento, no el elemento.rgba(...) con alfa bajo) y un borde claro fino para parecer material esmerilado real; si quitas uno, el efecto cae.box-shadow, no una: una sombra más oscura abajo-derecha y un brillo más claro arriba-izquierda, ambas con el tono de la superficie y no negro/blanco puros.Cambia entre **Cristal** y **Neumorphism** arriba. El cristal necesita un fondo; el neumorphism se apoya en un color plano que tú controlas.
En cristal manda *blur* (cuánto se desdibuja el fondo), *opacidad de fondo* (cuán translúcida la tarjeta) y *tint* (un tono leve). En neumorphism manda *distancia* (cuánto se desplazan las sombras), *blur* (cuán suaves son) e *intensidad* (cuánto se separan del color de la superficie).
El cristal luce sobre gradientes potentes o fotos. El neumorphism luce sobre tonos suaves casi neutros (#e0e5ec es el clásico gris neumórfico). La herramienta trae presets que puedes pulsar.
Hay tres sabores: **Elevado** (extruido), **Plano** (mismas sombras sin gradiente) y **Hundido** (presionado). Pruébalos — comparten matemática, solo cambia la dirección.
Pulsa **Copiar** y pega el snippet en tu hoja de estilos. La salida es lista para producción: incluye -webkit-backdrop-filter para Safari antiguo, orden de propiedades y border-radius para usarse como una clase.
Las propiedades de las que vive cada efecto. Documentación completa en MDN — backdrop-filter y box-shadow.
| Estilo | Propiedades clave | Qué ajustar | Notas |
|---|---|---|---|
| Cristal | backdrop-filter, background translúcido, border fino | Blur, saturación, alfa | Siempre incluye -webkit-backdrop-filter para Safari |
| Neumorphism (elevado) | Dos box-shadow + relleno con gradiente lineal | Distancia, blur, intensidad clara/oscura | Las sombras deben heredar el tono de la superficie, no negro/blanco puros |
| Neumorphism (hundido) | Dos box-shadow con inset | Mismos controles que elevado | Inset parece botón pulsado o input encajado |
| Combinado / híbrido | Cristal encima de una placa neumórfica | Apila con cuidado — demasiados filtros matan el rendimiento | Habitual en dashboards: tarjeta neumórfica con header de cristal |
background: rgba(255, 255, 255, 0.18);backdrop-filter: blur(14px) saturate(180%);-webkit-backdrop-filter: blur(14px) saturate(180%);border: 1px solid rgba(255, 255, 255, 0.30);border-radius: 16px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);Glassmorphism clásico. saturate(180%) añade un toque de color vivo detrás del blur — sin él, el cristal se ve descolorido. Pruébalo sobre un gradiente hero o una foto.
background: linear-gradient(145deg, #f0f5fa, #cdd1d7);border-radius: 24px;box-shadow: 16px 16px 32px #b8bcc1, -16px -16px 32px #ffffff;Las dos sombras hacen el trabajo: una más oscura abajo-derecha y un brillo arriba-izquierda. El relleno con gradiente añade ese reflejo sutil que el ojo lee como "plástico".
background: #e0e5ec;border-radius: 24px;box-shadow: inset 8px 8px 16px #b8bcc1, inset -8px -8px 16px #ffffff;Añade inset a ambas sombras y la tarjeta parece hundirse en vez de elevarse — perfecto para inputs y fondos de toggles.
-webkit-backdrop-filter. Safari antiguo (y cualquier WebView embebido) ignora backdrop-filter sin prefijo y tu cristal pasa a bloque sólido.-webkit-backdrop-filter además de la propiedad estándar backdrop-filter. Este generador los emite ambos. Sin el prefijo, Safari antiguo y los WebView de iOS muestran el background sólido y el cristal desaparece.aria-label en botones de icono — y evítalo en elementos que *deban* destacar (errores, CTAs primarios).backdrop-filter está soportado en todos los navegadores evergreen y box-shadow en todos. Cuida el rendimiento: backdrop-filter es una operación GPU por frame, así que no apiles demasiadas capas de cristal en la misma pantalla.