Generador de Glassmorphism CSS

Crea el efecto cristal esmerilado (glassmorphism) en CSS con desenfoque, transparencia, saturación, borde y radio, con vista previa en vivo. Sin registro.

Vista previa

Fondo

Glassmorphism

Desenfoque8px

Saturación150%

Opacidad15%

Borde30%

Radio16px

Color#ffffff

Código CSS

background: rgba(255, 255, 255, 0.15);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8px) saturate(150%);
-webkit-backdrop-filter: blur(8px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.3);

Recuerda que el elemento debe estar sobre contenido (imagen o color) para que el desenfoque se note.

Todo se genera en tu navegador; nada se envía a ningún servidor.

Volver a todas las herramientas