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.

./generador-glassmorphism
Vista previa
Fondo
Glassmorphism
Desenfoque8px
Saturación150%
Opacidad15%
Borde30%
Radio16px
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.
Compartir

Reseñas y valoraciones

Aún no hay reseñas. ¡Sé la primera persona en opinar!

Escribe una reseña

Tu calificación *

Herramientas relacionadas

Otras del catálogo que se usan bien junto a esta.

Comprobador de Contraste WCAG Calcula el ratio de contraste entre dos colores y comprueba si cumple WCAG AA y AAA, texto e interfaz. Te sugiere el color corregido sin perder el tono. Generador de Degradados CSS Crea degradados CSS lineales, radiales y cónicos con vista previa en vivo, paradas de color ilimitadas y código listo para copiar. Sin registro. Generador de Sombras CSS Crea sombras box-shadow CSS con control de desplazamiento, desenfoque, expansión, color y opacidad, varias capas, inset y vista previa en vivo. Sin registro.
Volver a todas las herramientas