Tarjeta Glassmorphism

Un componente de tarjeta que incorpora el popular efecto “Glassmorphism” (vidrio esmerilado), muy utilizado en el diseño web moderno. Al combinar el desenfoque de fondo (backdrop-filter), un color de fondo semitransparente y bordes sutiles, se logra una interfaz de usuario sofisticada y con gran profundidad visual.

Glassmorphism

Este es un demo de glassmorphism. El fondo brilla maravillosamente, proporcionando un efecto visual impactante que hace que el contenido parezca flotar en el espacio.

Código

Copia el siguiente código e intégralo en tu proyecto.

<div class="glass-container">
  <div class="glass-card">
    <h3 class="glass-title">Glassmorphism</h3>
    <p class="glass-text">
      Este es un demo de glassmorphism. El fondo brilla maravillosamente, proporcionando un efecto visual impactante que hace que el contenido parezca flotar en el espacio.
    </p>
  </div>
</div>

/* Fondo (Para demo) */
.glass-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem;
}

/* Tarjeta principal de glassmorphism */
.glass-card {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 2.5rem;
  max-width: 360px;
}

.glass-title {
  margin: 0 0 1rem 0;
  font-size: 1.75rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.glass-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

Características

Transparencia y desenfoque elegantes: Utiliza backdrop-filter: blur() para simular una textura de vidrio esmerilado realista.
Efecto tridimensional: La combinación de un borde semitransparente y una sombra paralela crea la ilusión de que la tarjeta flota sobre el fondo.
Alta versatilidad: Se adapta automáticamente y luce increíble, ya sea sobre un fondo con degradado o una imagen.