Generador de glassmorphism CSS
Crea tarjetas de cristal esmerilado con vista previa.
Ajusta el desenfoque, la opacidad del tinte, el radio de esquina y el borde de una tarjeta glassmorphism, mírala en vivo sobre un fondo de color y copia el CSS completo.
Color de fondo
Tinte del cristal
12px
25%
20px
50%
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.50); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
Cómo crear glassmorphism
- Elige un color de fondo detrás de la tarjeta de cristal.
- Elige el color del tinte y ajusta su opacidad.
- Ajusta el desenfoque, la opacidad del borde y el radio con los deslizadores.
- Copia el CSS generado a tu proyecto.
Preguntas frecuentes
¿Qué es el glassmorphism?
Es un estilo de interfaz que imita el cristal esmerilado: un panel translúcido sobre un fondo de color, suavizado con un desenfoque de fondo.
¿Por qué hay dos propiedades de desenfoque en el CSS?
La propiedad con prefijo webkit mantiene el efecto funcionando en Safari y otros navegadores que la necesitan.
¿backdrop-filter funciona en todas partes?
Lo admiten todos los navegadores modernos. Los navegadores muy antiguos mostrarán un panel translúcido sin desenfoque.