Efecto Glassmorphism o efecto de vidrio es basicamente, el concepto principal de esta tendencia es un fondo semitransparente, con una sombra y borde sublimes. Pero también se añade un difuminado al fondo para que lo que queda detrás del fondo se «transforme» elegantemente dentro del mismo elemento.
Ahora sí, aprendamos este sencillo tutorial:
Primero debemos tener ya creado nuestro elemento en HTML al cual le queremos aplicar este efecto, en este caso lo apliqué en los formularios de nuestra web galletaweb.net, ahora vamos a definir la siguiente clase efectglass al elemento HTML, una vez definida usaremos el siguiente código CSS 👇🏻
.efectglass{ background: rgba(255, 255, 255, 0.2); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.3); }
https://blog.galletaweb.net/que-es-el-efecto-glassmorphism-y-como-aprender-a-crearlo-con-css/
