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.
Funciona por completo en tu navegador. No se sube ningún archivo.
Tu archivo está listo.
Prueba otro archivo, o inténtalo de nuevo.
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.
Comentarios