El Arte del Glassmorphism
El Glassmorphism se basa en la transparencia, el desenfoque de fondo y un borde sutil para crear una jerarquía visual que imita al cristal físico. Este componente es perfecto para interfaces que buscan un aspecto futurista y limpio.
Características
- Backdrop Blur: Utiliza filtros de CSS modernos para desenfocar lo que hay detrás.
- Borde de Cristal: Un borde blanco semitransparente que simula el grosor del vidrio.
- Sombra Suave: Una sombra con gran radio de difusión para dar profundidad.
- Responsivo: Se adapta perfectamente a cualquier contenedor.
Código del Componente
<div class="glass-card">
<img src="avatar.jpg" alt="Profile" />
<h3>Alex Rivera</h3>
<p>Product Designer</p>
</div>
<style>
.glass-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 2.5rem;
padding: 2rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
text-align: center;
}
</style>