Creador de Tarjetas Glass

Diseña tarjetas glassmorphism con desenfoque y degradados.

Propiedades de la tarjeta

Desenfoque de fondo: 10px

Opacidad de fondo: 7%

Opacidad del borde: 30%

Radio del borde: 20px

Ancho del borde: 1px

Opacidad del brillo interior: 5%

Tinte de fondo

Tinte del borde

Contenido de los elementos de la tarjeta

Tarjeta de cristal

Un componente interactivo premium con sutil refracción y resaltes de borde.

.glass-card {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 0 40px 20px rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  padding: 24px;
  color: #ffffff;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}

Cómo funciona

Ajusta el desenfoque, los brillos, los resplandores interiores y el fondo de una tarjeta glassmorphism.
Observa la vista previa en vivo actualizarse mientras ajustas.
Adapta el efecto a tu diseño.
Copia HTML, CSS o una configuración de Tailwind limpios.

Para qué se usa

Construir una tarjeta de cristal esmerilado para una UI moderna.
Obtener CSS de producción para un efecto glassmorphism.
Exportar un componente de cristal listo para Tailwind.

Bueno saberlo

El aspecto de cristal depende de backdrop-filter y de un fondo recargado detrás: sobre un color plano el efecto es sutil.
La compatibilidad con backdrop-filter varía; pruébalo en tus navegadores de destino y ofrece un plan alternativo.

Preguntas frecuentes

¿Qué salida puedo copiar?

HTML limpio, CSS plano o una configuración de Tailwind, la que encaje con tu stack.

¿Por qué el cristal se ve plano en mi página?

El glassmorphism necesita contenido visual detrás para desenfocar. Sobre un fondo sólido no hay nada que esmerilar, así que colócalo sobre una imagen o un degradado.

¿Se sube algo?

No. El constructor se ejecuta por completo en tu navegador.

Herramientas relacionadas

Visor DXF

Paleta de Colores

Conversor de Color

Generador de Box Shadow CSS

Verificador de Contraste