El glassmorphism es un estilo de diseño UI con efectos de cristal esmerilado: capas semitransparentes, desenfoque de fondo y bordes sutiles que dejan brillar los colores del fondo. Popularizado por Apple y Microsoft, hoy es una técnica estándar del diseño de interfaces moderno.
Ajusta el radio de desenfoque, la transparencia del blanco, el grosor del borde y el radio de las esquinas para crear tu tarjeta de cristal. La vista previa muestra un panel esmerilado realista sobre un fondo colorido, y el CSS generado incluye el prefijo -webkit- para compatibilidad con Safari.
Frequently Asked Questions
Q: ¿Qué es backdrop-filter?
¿Qué es backdrop-filter? Aplica efectos visuales (como desenfoque) a todo lo que está DETRÁS de un elemento. A diferencia de filter, que afecta al propio elemento, backdrop-filter desenfoca el fondo manteniendo nítida la capa de cristal.
Q: ¿Funciona el glassmorphism en todos los navegadores?
¿Funciona el glassmorphism en todos los navegadores? Todos los navegadores modernos soportan backdrop-filter. Safari requiere el prefijo -webkit-backdrop-filter, que el CSS generado incluye automáticamente.
Q: ¿Sigue de moda el glassmorphism en 2026?
¿Sigue de moda el glassmorphism en 2026? Sí. Ha evolucionado de tendencia a lenguaje de diseño establecido, usado por Apple, Microsoft y apps fintech como Revolut y N26.
Q: ¿Cuál es el mejor fondo para tarjetas de cristal?
¿Cuál es el mejor fondo para tarjetas de cristal? Los degradados vibrantes en morado, azul, rosa o verde azulado funcionan mejor. El fondo debe tener suficiente color para verse a través de la capa esmerilada.
Q: ¿Afecta backdrop-filter al rendimiento?
¿Afecta backdrop-filter al rendimiento? Unos pocos elementos de cristal tienen un impacto insignificante. Docenas de backdrop-filters apilados pueden ralentizar el scroll en dispositivos de gama baja: úsalos solo en superficies clave.
Colores del Mundo Hispano
Del añil guatemalteco al rosa mexicano, el mundo hispanohablante tiene una rica tradición cromática. Estos colores nacen de textiles indígenas, arquitectura colonial y festividades, y hoy inspiran paletas llenas de carácter.
Rosa Mexicano #E4007CColor icónico del diseño mexicano, creado por Ramón Valdiosera
Azul Añil #4B0082Tinte tradicional de los textiles mayas de Guatemala
Rojo Bermellón #E34234El rojo intenso de los toros y la cerámica española
Amarillo Maíz #F4B41AEl oro del maíz, base de la alimentación mesoamericana
Verde Jade #00A86BLa piedra sagrada de mayas y aztecas
Azul Celeste #A5C8E1El azul de la bandera argentina y el cielo porteño
Terracota #E2725BArcilla cocida — el color de los tejados coloniales
Vino Tinto #722F37El burdeos de las bodegas de La Rioja
Oro Colonial #D4AF37El dorado de los retablos barrocos americanos
Turquesa Caribe #40E0D0El color de las playas del Caribe
Q: ¿Qué es el rosa mexicano?
¿Qué es el rosa mexicano? El rosa mexicano (#E4007C) es un color vibrante promovido por el diseñador Ramón Valdiosera en los años 40 como símbolo de identidad nacional, usado hoy en artesanías, textiles y diseño contemporáneo.
Q: ¿Qué es el azul añil?
¿Qué es el azul añil? El añil es un tinte natural azul extraído de la planta del índigo, usado en los textiles mayas de Guatemala y en los huipiles tradicionales desde tiempos prehispánicos.