Generador de Glassmorphism
Crea efectos CSS de vidrio esmerilado con vista previa en tiempo real.
background: rgba(255, 255, 255, 0.2); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.3);
Herramientas recomendadas
Utilidades seleccionadas que podrían serte útiles
Crear el efecto de cristal esmerilado (glassmorphism) en CSS
Resumen
El glassmorphism es el aspecto de cristal esmerilado: un panel translúcido y desenfocado que deja ver el fondo con suavidad, popularizado por los sistemas operativos modernos. Recrearlo en CSS implica combinar la transparencia del fondo, un desenfoque de fondo, un borde sutil y una sombra en su justa medida. Este generador te deja ajustar cada parte con una vista previa en vivo y copia el CSS exacto, así logras el efecto sin ensayo y error.
Cómo usar (paso a paso)
- 1
Fija transparencia y desenfoque
Ajusta la opacidad del fondo y el desenfoque de fondo para controlar cuán esmerilado se ve el cristal.
- 2
Afina borde y sombra
Añade un borde claro sutil y una sombra suave para darle al panel su borde vidrioso y profundidad.
- 3
Copia el CSS
Pega la regla generada en tu elemento; asegúrate de que quede sobre un fondo colorido o de imagen para ver el efecto.
Cómo Funciona
El efecto superpone varias propiedades CSS: un color de fondo semitransparente, backdrop-filter: blur() para esmerilar lo que haya detrás del elemento, un borde fino y claro que capta el 'borde' del cristal, y una sombra suave para dar profundidad. Ajustas desenfoque, transparencia y color con controles mientras una vista previa sobre un fondo muestra el resultado, y luego copias la regla generada en tu hoja de estilos.
Cuándo usarlo
Diseñar una tarjeta, barra de navegación o modal que flota sobre un fondo o imagen colorido. Dar a una UI una profundidad moderna y en capas. Reproducir el estilo de panel esmerilado de iOS o Windows. Crear una superposición que siga siendo legible mientras muestra el contenido detrás. Prototipar un efecto de cristal antes de fijarlo en código. Aprender cómo se combinan backdrop-filter y la transparencia.
Preguntas Frecuentes
backdrop-filter solo desenfoca el contenido detrás del elemento, así que necesita algo colorido o una imagen detrás; sobre un fondo blanco liso no hay nada que esmerilar. Confirma también que el fondo del elemento es semitransparente, no sólido.
Notas Importantes
backdrop-filter exige mucha GPU; muchos paneles de cristal en una página, sobre todo animados o en scroll, pueden ralentizar el renderizado en dispositivos modestos. Usa el efecto con moderación en elementos clave.