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