Liquid-Glass-Effekt in CSS
Milchglas, verzerrtes oder chromatisches Glas – ziehe die Karte, um die Lichtbrechung zu sehen, und kopiere produktionsreifes CSS.
Die Linsenbrechung im Modus „Objektiv“ funktioniert in Chromium-Browsern; Safari und Firefox zeigen stattdessen die satinierte Unschärfe.
Zieh mich herum – das Glas bricht alles, was dahinter liegt.
So funktioniert der Liquid-Glass-Generator
Gestalte Oberflächen im Stil von Liquid Glass visuell – Milchglas, Verzerrung, chromatische Brechung – und kopiere produktionsreifes CSS.
Drei Render-Modi
„Satiniert“ ist Glassmorphism im Milchglas-Look in reinem CSS und funktioniert überall, auch in Safari. „Flüssig“ ergänzt eine Verzerrung per SVG-Rauschen für Wellen wie auf nassem Glas. „Objektiv“ erzeugt eine chromatische Brechungskarte – das kommt dem Liquid-Glass-Look am nächsten.
Rauschverzerrung
Eine prozedurale feTurbulence-Textur verschiebt den weichgezeichneten Hintergrund – die Frequenz bestimmt die Größe der Wellen, die Stärke, wie stark das Licht gebrochen wird.
Verschiebbare Vorschau
Die Glaskarte schwebt über einer bunten Szene – verschiebe sie, um zu sehen, wie das Material unterschiedliche Inhalte dahinter bricht.
Produktionsreifer Code
Jeder Modus exportiert vollständigen Code zum direkten Einfügen: die CSS-Klasse plus bei Bedarf den SVG-Filter, mit Fallbacks über -webkit- für Safari.
Häufig gestellte Fragen
Eine dynamische Materialsprache, die Apple populär gemacht hat: lichtdurchlässige Oberflächen, die den Inhalt dahinter weichzeichnen, sättigen und leicht brechen – mit hellen Innenkanten und sanfter Tiefe. Im Web wird sie mit backdrop-filter und SVG-Filtern nachgebildet.
„Satiniert“ für alles Kritische – dieser Modus funktioniert in allen modernen Browsern. „Flüssig“ degradiert sanft: Browser, die den SVG-Filter nicht anwenden können, zeigen trotzdem die satinierte Unschärfe. „Objektiv“ ist ein Showcase nur für Chromium; behalte die Fallback-Zeile mit -webkit- für Safari.
Die Brechungskarte ist ein kodierter SVG-Verlauf in der Größe des Elements – sie zeigt dem Displacement-Filter, wo die Kanten liegen. Wenn du die Größe des Elements änderst, erzeuge den Code mit passender Breite und Höhe neu.
Unschärfe und Sättigung berechnet die GPU, bei wenigen Elementen ist das günstig. Displacement-Filter sind aufwendiger – animiere sie nicht auf großen Flächen und beschränke dich auf ein bis zwei Glas-Panels pro Ansicht.