a11y.skipToMainContent
1

CSS Generador de Glassmorfismo

Cree la mirada de vidrio escarpado visualmente — sintonizar el borrón, la transparencia, la saturación, la frontera y la sombra, luego copiar CSS listo para la producción.

tool.glassmorphism.presets

tool.glassmorphism.backdrop
px
%
%
%
px
%

tool.glassmorphism.preview

tool.glassmorphism.glass

tool.glassmorphism.css

Was this tool helpful?
Send output to:
Advertisement

How to use Glassmorphism Generator

  1. Elige un fondo ligero o oscuro, luego establece las cantidades de borrón y saturación.
  2. Escoja un color de relleno y ajuste su opacidad para que el fondo se muestre a través.
  3. Mantén la opacidad de la frontera, el radio de esquina y la sombra de gota opcional hasta que la tarjeta se vea bien.
  4. Haga clic en Copiar CSS para copiar el reglamento completo, incluyendo el retroceso -webkit-backdrop-filter.

¿Cómo se llama?

El efecto UI de vidrio congelado es el efecto UI de cristal construído en la propiedad CSS. Un relleno semi-transparente permite que el fondo se muestre a través, mientras que el codificador confianzabackdrop-filter: borrón() interpretado/código borroso borrón todo lo que se sienta detrás del elemento y ■código instrucciones() seleccionado/código icono aumenta los colores para ese brillo cristalino. Este generador preve una tarjeta de vidrio sobre un gradiente colorido por lo que el desdibujo es realmente visible, y produce un reglamento completo que incluye tanto el codificador confianzabackdrop-filter seleccionado/code fiel y el ■code ratio-webkit-backdrop-filter buscado/code maillot, el fondo rgba, un fino borde translúcido, el borde-radius y una sombra suave opcional
Advertisement

FAQ

¿Por qué mi efecto de vidrio parece un color plano?
backdrop-filter sólo difumina el contenido sentado detrás del elemento. Si no hay nada colorido o ocupado detrás de su tarjeta, el borrón no tiene nada que trabajar. Coloque la tarjeta de vidrio sobre una imagen o un gradiente vívido para ver el efecto.
¿Necesito la línea -webkit-backdrop-filter?
Sí, para Safari. Los navegadores basados en WebKit, especialmente en iOS, todavía requieren el prefijo -webkit-backdrop-filter. Este generador lo incluye automáticamente al lado de la propiedad estándar.
¿Es un filtro de fondo ampliamente apoyado?
Funciona en todas las versiones actuales de Chrome, Edge, Firefox y Safari. Para navegadores muy antiguos, el elemento simplemente muestra su fondo semitransparente sin el borrón, que degrada con gracia.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Glassmorphism Generator on Wikipedia·Developer Tools on Wikipedia·Glassmorphism Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement