Herramientas · CSS · Crear un efecto glassmorphism
Crear un efecto glassmorphism
Crea una tarjeta de vidrio esmerilado con desenfoque de fondo, transparencia y borde suave, y copia el CSS.
Añade un archivo y ejecuta la herramienta.
Tu archivo está listo.
Prueba otro archivo, o inténtalo de nuevo.
Ajustes
Ajusta la configuración de abajo. El resultado se actualiza sobre la marcha.
Funciona por completo en tu navegador. No se sube ningún archivo.
Funciona por completo en tu navegador. Nada se sube nunca a un servidor.
Cómo funciona
Ajusta el desenfoque, el color de tinte, la opacidad de fondo, y la saturación.
Afina la opacidad del borde y el radio de las esquinas para dar profundidad.
Copia el CSS terminado, incluida la propiedad backdrop-filter.
Preguntas frecuentes
El efecto depende de backdrop-filter, que algunos navegadores más antiguos no admiten. Donde falta, la vista previa muestra el tinte sin el desenfoque, pero el CSS copiado no se ve afectado y sigue siendo correcto.
Ambos. backdrop-filter desenfoca lo que haya detrás del elemento: una imagen, un degradado, u otro color.
El CSS generado incluye el prefijo -webkit-backdrop-filter junto con la propiedad estándar.
No. Todo funciona en tu navegador.
Guías
Una mirada más de cerca a problemas concretos que resuelve esta herramienta.
Why Glassmorphism Falls Apart Without Something Behind It
A frosted-glass panel with nothing behind it to blur isn't glass, it's just a translucent grey box. The whole effect depends on real content sitting behind the element - which is also why it's so easy to get wrong.
Leer la guíaHow to Build Frosted-Glass CSS (Glassmorphism)
Pick a demo backdrop, tune blur, tint, saturation and border, and copy a real, standards-compliant CSS block. What each control changes and why the demo preview is honestly an approximation.
Leer la guíaBuilding a Frosted-Glass Navbar That Doesn't Disappear on Old Browsers
A sticky glass navbar over scrolling content is one of the most common real uses of backdrop-filter, and one of the easiest to get wrong on legibility and older-browser fallback both.
Leer la guía
Comentarios