Generador de Glassmorphism CSS
Opciones de Glassmorphism
Antecedentes
Filtro de fondo
frontera
Forma y sombra
Estado
inactivo
Vista previa en vivo
Glass UI
Frosted card
Live preview for background, blur, border, radius, and shadow.
Acerca de este generador de Glassmorphism CSS
Esta herramienta le ayuda a crear tarjetas de interfaz de usuario de vidrio esmerilado utilizando fondos transparentes, fondos borrosos, bordes, esquinas redondeadas y sombras suaves.
Úselo para hero cards, paneles, modales, tablas de precios, paneles de inicio de sesión y otros elementos modernos de interfaz.
como usarlo
- Ajuste la transparencia, el desenfoque, la saturación, el borde, el radio y la sombra del fondo.
- Utilice la vista previa en vivo para ver cómo se ve la tarjeta de cristal sobre un fondo colorido.
- Copie el CSS generado o la regla .glass-card completa en su proyecto.
Consejos
- El efecto glassmorphism funciona mejor sobre fondos coloridos o con textura.
- Mantenga suficiente contraste entre el texto y el fondo de cristal.
- Utilice el filtro de fondo con -webkit-backdrop-filter para una mejor compatibilidad con el navegador.
- Evite valores de desenfoque muy intensos en áreas grandes si el rendimiento es importante.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.
Generador de Backdrop Filter CSS
Cree y previsualice valores de `backdrop-filter` CSS para glassmorphism, paneles esmerilados y overlays borrosos.
Utilidades varias
›
Generador de gradiente CSS
Genere, analice y obtenga una vista previa de degradados lineales y radiales CSS en línea. Generador de gradientes gratuito para desarrolladores y diseñadores.
Utilidades varias
›
Generador de bordes CSS
Cree estilos de borde CSS con ancho, estilo, color y radio de borde.
Utilidades varias
›
Generador/analizador de Box Shadow CSS
Genere, analice y previsualice valores de `box-shadow` CSS en línea. Ajuste offset, blur, spread, color e `inset`.
Utilidades varias
›
Preguntas frecuentes sobre Glassmorphism CSS
¿Qué es glassmorphism en CSS?
Glassmorphism es un estilo visual que utiliza transparencia, desenfoque, bordes y sombras para crear un efecto de vidrio esmerilado.
¿Qué propiedad CSS crea el desenfoque?
La propiedad principal es `backdrop-filter`, normalmente con `blur()`. Muchos proyectos también incluyen `-webkit-backdrop-filter`.
¿Por qué hace falta un fondo detrás?
El desenfoque de fondo solo se ve cuando hay contenido detrás del elemento que se va a desenfocar.
¿Puedo usar este CSS para tarjetas y modales?
Sí. El CSS generado es útil para tarjetas, modales, paneles, barras de navegación y widgets del panel.