Generador de Glassmorphism

Genera CSS Glassmorphism con controles de transparencia y desenfoque

Preajustes

Blur (px)

Saturation (%)

Background color

Background opacity

Border color

Border opacity

Border radius (px)

Glassmorphism solo funciona cuando hay color e imágenes detrás — la vista previa se coloca intencionadamente sobre un degradado colorido.

Vista previa glass

backdrop-filter · rgba background

CSS

.glass {
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 12px;
}

Cómo usar

Haga clic en un botón de preajuste (p. ej., Frosted, Tinted, Dark) para comenzar desde un estilo listo para usar.
Ajuste la opacidad de fondo, el radio de desenfoque, la opacidad del borde y el color de fondo usando los controles.
Vea la vista previa de la tarjeta actualizar en vivo contra el fondo degradado.
Copie el CSS generado (backdrop-filter, background, border) y péguelo en su proyecto.

Ejemplos

Establecer desenfoque 12px, fondo rgba(255,255,255,0.15), borde rgba(255,255,255,0.3) produce un efecto de tarjeta de vidrio esmerilado sutil.
El preajuste Dark aplica un fondo semi-transparente oscuro con desenfoque apagado, adecuado para paneles oscuros.

Verifica las salidas antes de usar en producción. Sin garantía — ver Términos.