Glassmorphism CSS
Crea un efecto de vidrio esmerilado (desenfoque de fondo) con vista previa y CSS listo.
- Instantánea
- Gratis
- Privada (procesada localmente)
- Sin registro
Un efecto vidrio, sin tanteos
Ajusta el desenfoque, la transparencia, el redondeo y el borde: el panel de vidrio esmerilado se actualiza en vivo sobre un fondo de color, y el CSS completo (con prefijo Safari) está listo para copiar.
-
Ajusta el desenfoque
La intensidad del fondo desenfocado.
-
Afina el vidrio
Transparencia, redondeo, borde, tinte.
-
Copia el CSS
Aplícalo a tu tarjeta o barra.
El CSS generado (ajustes por defecto)
| Propiedad | Valor |
|---|---|
| background | rgba(255, 255, 255, 0.25) |
| backdrop-filter | blur(8px) |
| border-radius | 16px |
| border | 1px solid rgba(255, 255, 255, 0.18) |
Se añade el prefijo -webkit-backdrop-filter para Safari. El efecto solo se ve sobre un fondo no plano. Todo se genera localmente.
Preguntas frecuentes
¿Qué es el glassmorphism?
Un estilo de interfaz que imita el vidrio esmerilado: un panel semitransparente que desenfoca lo que pasa por detrás, con un borde claro y fino. Muy usado para tarjetas, barras y ventanas modernas.
¿Cómo se logra el efecto en CSS?
Con backdrop-filter: blur(...) que desenfoca el fondo, un relleno rgba semitransparente, un border-radius y un borde rgba claro. La herramienta genera estas líneas y el prefijo -webkit- para Safari.
¿Por qué el fondo debe ser de color?
El desenfoque solo se ve si hay algo que desenfocar detrás del panel. Sobre un fondo plano el efecto desaparece. Por eso la vista previa coloca el vidrio sobre un degradado para mostrarlo bien.
¿Es compatible con todos los navegadores?
backdrop-filter está bien soportado en navegadores recientes (con -webkit- para Safari). En navegadores muy antiguos, prevé un relleno de reserva algo más opaco para que siga legible.