Kostenlos · Design und CSS
Liquid-Glass-CSS-Generator.
Erstelle Panels im Liquid-Glass-Stil von Apple mit CSS: Unschärfe, Sättigung, Tönung, Kantenlicht, Schatten und optionaler SVG-Lichtbrechung, mit Live-Vorschau.
Loading the calculator…
So verwenden Sie das Tool: Liquid-Glass-CSS-Generator
Geben Sie Daten ein oder wählen Sie eine Datei. Passen Sie die Einstellungen an, erstellen Sie das Ergebnis und prüfen Sie es vor dem Kopieren oder Herunterladen.
Grenzen und unterstützte Formate
Ihre Eingaben werden auf Ihrem Gerät verarbeitet.
Technische Hinweise auf Englisch
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.