Generador CSS Glassmorphism Gratuito en Línea
Genera efectos de glassmorfismo con vista previa en vivo. Ajusta desenfoque, transparencia, borde y color de fondo.
Who uses the Generador CSS Glassmorphism?
- Desarrolladores de UI implementando componentes de tarjeta de vidrio esmerilado para interfaces web modernas.
- Diseñadores creando maquetas glassmorphism que coincidan con la estética actual de macOS y Windows 11.
- Estudiantes de frontend explorando CSS backdrop-filter y efectos de transparencia modernos.
How the Generador CSS Glassmorphism works
Ajusta el color de tinte y la transparencia para establecer el color y la opacidad del fondo de vidrio.
Configura la intensidad de desenfoque (backdrop-filter: blur) para el efecto de profundidad de vidrio esmerilado.
Ajusta el radio de borde y la opacidad del borde para el estilo de los bordes.
Copia el código CSS completo, que incluye la versión con prefijo -webkit- para compatibilidad con Safari.
Tips & tricks
- El box-shadow en el CSS generado es fijo (una sombra ambiental suave) — no es ajustable mediante los deslizadores, solo el tinte, el desenfoque, el radio de borde y la opacidad de borde lo son.
- Valores de transparencia más altos (cerca del máximo) hacen el efecto de vidrio más sutil; valores más bajos hacen que la tarjeta se vea más sólida.
- Siempre previsualiza tu elemento de vidrio sobre el fondo real en el que estará — el efecto se ve muy diferente en una foto que en un color plano.
- Copia tanto la línea backdrop-filter como -webkit-backdrop-filter — Safari necesita específicamente la versión con prefijo.
Frequently Asked Questions
¿Qué es el glassmorphism?
El glassmorphism es una tendencia de diseño UI (popularizada ~2020) que usa elementos tipo vidrio esmerilado: fondos semitransparentes, desenfoque de fondo y bordes sutiles para crear profundidad y capas. Popularizado por macOS Big Sur de Apple y Windows 11.
¿Qué propiedad CSS crea el efecto de desenfoque de vidrio esmerilado?
backdrop-filter: blur(10px) aplica un desenfoque a todo lo que está detrás del elemento. Combinado con un background-color semitransparente y un borde claro, crea el efecto de vidrio — exactamente lo que controlan los deslizadores de esta herramienta.
¿backdrop-filter funciona en todos los navegadores?
backdrop-filter se admite en Chrome, Edge y Safari (con prefijo -webkit-). Firefox añadió soporte en la versión 103. La salida de esta herramienta siempre incluye tanto backdrop-filter como -webkit-backdrop-filter para máxima compatibilidad.
¿Qué fondo se necesita detrás de un elemento glassmorphism?
El glassmorphism solo se ve bien sobre un fondo colorido, borroso o degradado — necesita algo que desenfocar. Sobre un fondo blanco o sólido, el efecto de desenfoque es invisible. La vista previa de la herramienta usa una escena en degradado para demostrarlo.
¿Es accesible el glassmorphism?
El glassmorphism puede tener problemas de contraste — el texto sobre vidrio transparente frente a fondos variados puede no cumplir los requisitos de contraste WCAG. Prueba siempre con la imagen de fondo real y asegúrate de que el texto cumpla una relación de contraste de 4,5:1.
Is my data safe when using the Generador CSS Glassmorphism?
Completely safe. The Generador CSS Glassmorphism processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Generador CSS Glassmorphism output in commercial projects?
Yes. The Generador CSS Glassmorphism is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Generador CSS Glassmorphism follow official standards?
Yes. The Generador CSS Glassmorphism is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.