Gratuit · Design et CSS
Générateur CSS Liquid Glass.
Créez des panneaux façon Liquid Glass d’Apple en CSS : flou, saturation, teinte, reflets sur les bords, ombre et effet de réfraction SVG facultatif, avec aperçu en direct.
Loading the calculator…
Comment utiliser cet outil: Générateur CSS Liquid Glass
Saisissez ou sélectionnez vos données. Réglez les options, générez le résultat puis vérifiez-le avant de le copier ou de le télécharger.
Limites et formats acceptés
Vos données sont traitées sur votre appareil.
Notes techniques en anglais
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.