Diseño

Generador de glassmorphism

Crea CSS de cristal esmerilado con desenfoque, transparencia, tinte y vista previa en vivo Funciona en tu dispositivo: no se sube ni se almacena nada.

Desenfoque12px

Transparencia20%

Saturación120%

Radio del borde16px

Grosor del borde1px

Opacidad del borde40%

Color del tinte

#ffffff

Fondo

Vista previa

Glassmorphism

Salida CSS

/* Glassmorphism */
background: rgba(255, 255, 255, 0.20);
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.18);
-webkit-backdrop-filter: blur(12px) saturate(120%);
backdrop-filter: blur(12px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.40);

/* Fallback for browsers without backdrop-filter support */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  background: rgba(255, 255, 255, 0.60);
}

Relacionadas

Generador de clip-path CSSDiseño Editor de curvas cubic-bezierDiseño Generador de blobs SVGDiseño

Acerca de Generador de glassmorphism

Crea CSS de cristal esmerilado con desenfoque, transparencia, tinte y vista previa en vivo

Generador de glassmorphism es una herramienta gratuita de la categoría Diseño y visual en BrowseryTools. Funciona por completo en tu navegador: lo que le das se procesa en tu propio dispositivo y nunca se sube a un servidor, no hay registro, ni anuncios, ni marcas de agua, y sigue funcionando sin conexión una vez cargada la página.