Gratis · Diseño y CSS
Generador CSS de Liquid Glass.
Crea paneles al estilo Liquid Glass de Apple en CSS: desenfoque, saturación, tinte, brillo en los bordes, sombra y refracción SVG opcional, con vista previa en vivo.
Loading the calculator…
Cómo usar esta herramienta: Generador CSS de Liquid Glass
Introduce los datos o selecciona el archivo. Ajusta las opciones, genera el resultado y revísalo antes de copiarlo o descargarlo.
Límites y formatos compatibles
Los datos se procesan en tu dispositivo.
Notas técnicas en inglés
Refraction works in Chromium only; other browsers keep the blur. Everything is calculated in your browser; nothing you type is uploaded.
backdrop-filter blurs and saturates what is behind the element; inset shadows draw the bright and dark edges; an optional SVG feDisplacementMap bends the background.
The “iOS 26 style” preset gives a 28 px card with blur(14px) saturate(180%), a 12 % white tint and a bright top edge.