Generador de Glassmorphism CSS
Guía
Generador de Glassmorphism CSS
Crea efectos de vidrio esmerilado espectaculares con un editor visual en vivo. Ajusta el desenfoque del fondo, la transparencia del fondo, la opacidad de los bordes, el radio de los bordes y las sombras de caja en tiempo real y ve el resultado al instante en una vista previa colorida. Copia el CSS generado o un snippet completo de HTML+CSS listo para tu proyecto, con prefijos de proveedores para compatibilidad entre navegadores.
Cómo Usar
Usa los deslizadores para ajustar las propiedades de la opacidad del vidrio: el efecto de difuminado de fondo regula la intensidad del vidrio empañado, el color de fondo y la transparencia definen el tono, y el borde controla el borde de vidrio sutil. Elige entre 6 fondos de degradado y activa formas flotantes para ver cómo interactúa el difuminado con el contenido detrás de la tarjeta de vidrio. Selecciona un preset como Vidrio Sutil o Vidrio Oscuro para obtener un punto de partida rápido, luego ajusta con precisión. Copia el CSS o el snippet completo de HTML+CSS cuando estés satisfecho con el resultado.
Características
- Vista previa en vivo – Vea el efecto de vidrio translúcido actualizándose en tiempo real mientras ajusta cualquier control.
- Control de desenfoque de fondo Ajusta el deslizador desde 0 hasta 40 px para definir la intensidad del vidrio ahumado.
- Fondo de RGBA Seleccionador de colores con deslizador de opacidad separado para un control preciso de transparencia
- Controles de Borde y Sombra Ajusta el ancho de borde, color, opacidad, radio y sombra de caja opcional.
- Fondos de degradado – **6 presets de gradiente coloridos con formas flotantes opcionales** para demostrar el efecto de desenfoque.
- Preajustes de Estilo Preset de un clic: Vidrio Sutil, Vitrina Helada, Vidrio Oscuro y Vidrio Colorido
- Prefijos del Vendedor El estilo generado incluye el filtro de fondo `-webkit-backdrop-filter` para compatibilidad con Safari.
- Copiar CSS o HTML + CSS Obtenga solo las propiedades de estilo CSS o una tarjeta completa lista para pegar.
Preguntas frecuentes
-
¿Qué es el vidrio morfo en CSS?
El morfo de vidrio es una tendencia en el diseño de interfaces que crea un aspecto de cristal empañado utilizando `backdrop-filter` con desenfoco combinado con un color de fondo semi-transparente. El desenfoco hace que los contenidos detrás del elemento aparezcan suaves y difusos mientras que el fondo transparente añade una tintura de color. Popularizado por macOS Big Sur de Apple y el diseño fluido de Windows 11, el morfo de vidrio crea profundidad y jerarquía visual al dejar pasar parcialmente los elementos de fondo. Las propiedades CSS clave son `backdrop-filter: blur()`, `background: rgba()` y típicamente un borde sutil para realzar el borde del cristal.
-
Los navegadores que soportan `backdrop-filter` son: - **Chrome** (versiones recientes) - **Edge** (basado en Chromium) - **Firefox** (desde la versión 102+) - **Safari** (iOS 15+, macOS Ventura, Windows 11) - **Opera** - **Brave** Algunos navegadores móviles como Samsung Internet y UC Browser también lo soportan.
El filtro de fondo (`backdrop-filter`) está soportado en Chrome desde la versión 76 y versiones posteriores, Safari desde la versión 9 y versiones posteriores (con prefijo `-webkit`), Edge desde la versión 79 y versiones posteriores, Firefox desde la versión 103 y versiones posteriores, y todos los navegadores móviles modernos. Safari requiere el prefijo `-webkit-backdrop-filter`, que este generador incluye automáticamente. La única brecha notable es en las versiones antiguas de Firefox anteriores a la 103 y en Internet Explorer, que no tiene soporte. Para navegadores sin soporte, el color de fondo semi-transparente aún proporciona un efecto de capa teñida, pero sin difuminado. En general, el soporte de navegadores supera el 95% de los usuarios globales según datos de 2026.
-
¿Cómo se diferencia el `backdrop-filter` del filtro estándar en CSS?
La propiedad CSS `filter` aplica efectos visuales como el desenfoque al elemento y sus hijos. El `backdrop-filter` aplica los mismos efectos solo al área detrás del elemento, dejando el contenido del elemento claro y legible. Esto es lo que crea el efecto de vidrio morado: el texto en la tarjeta de vidrio permanece nítido mientras el fondo detrás de ella aparece desenfocado. Si hubieras usado `filter: blur()`, también el texto dentro de la tarjeta se habría vuelto borroso e illegible. El `backdrop-filter` crea esencialmente un efecto de ventana donde miras a través del cristal opaco.
-
¿Qué hace que un diseño de vidrio morfo sea bueno?
El vidrio morfológico efectivo requiere un fondo colorido o detallado para que el borrado sea visible. Un fondo blanco sólido detrás del vidrio parece idéntico a una tarjeta regular. Usa valores de borrado entre 8 y 20 píxeles en la mayoría de los casos. Mantén la opacidad del fondo entre el 10% y el 30% para que el contenido detrás quede parcialmente visible. Añade un borde claro con opacidad blanca del 10% al 30% para mejorar el borde del vidrio. Evita apilar múltiples capas de vidrio, ya que cada filtro *backdrop* aumenta el costo de rendimiento. Asegúrate de que la contraste de texto cumpla con los estándares de accesibilidad, ya que los fondos semi-transparentes pueden reducir la legibilidad.
Instalar extensiones
Agregue herramientas IO a su navegador favorito para obtener acceso instantáneo y búsquedas más rápidas
恵 ¡El marcador ha llegado!
Marcador es una forma divertida de llevar un registro de tus juegos, todos los datos se almacenan en tu navegador. ¡Próximamente habrá más funciones!
Herramientas clave
Ver todo Los recién llegados
Ver todoActualizar: Nuestro última herramienta se agregó el 26 abr. 2026
Involucrarse
Ayúdanos a seguir brindando valiosas herramientas gratuitas
