CSS-Glassmorphism-Generator
Stellen Sie Weichzeichnung, Transparenz, Rahmen und Schatten ein, um einen Milchglas-Effekt (Glassmorphism) zu erzeugen, und kopieren Sie anschließend das erzeugte CSS. Die Darstellung wird live in Ihrem Browser vorgeschaut, es werden keine Daten an einen Server gesendet.
So funktioniert es
Glassmorphism kombiniert drei CSS-Eigenschaften: einen halbtransparenten Hintergrund, eine Hintergrund-Weichzeichnung (backdrop-filter: blur()), die alles hinter dem Element milchig verwischt, und einen feinen hellen Rahmen, der eine Spiegelung am Rand des „Glases“ simuliert. Passen Sie die Regler an, um die Balance zwischen Textlesbarkeit und visuellem Effekt zu finden, und kopieren Sie dann das CSS, um es auf Ihre Karten, Navigationsleisten oder Modalfenster anzuwenden.
Funktioniert Glassmorphism in allen Browsern?
Die Eigenschaft backdrop-filter wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge); der erzeugte Code enthält das Präfix -webkit-backdrop-filter für bessere Kompatibilität mit Safari. In sehr alten Browsern bleibt das Element sichtbar, jedoch ohne den Weichzeichnungseffekt.
Auf welchem Hintergrund ist der Effekt am besten sichtbar?
Glassmorphism ist vor allem auf einem kontrastreichen oder farbigen Hintergrund sichtbar (Verlauf, Bild, Illustration), der hinter dem Element liegt: Auf einem einfarbigen, hellen Hintergrund bleibt der Weichzeichnungseffekt dezent. Testen Sie immer die Lesbarkeit des Textes auf dem Glas-Element, bevor Sie es in einer echten Oberfläche einsetzen.
Erzeugung und Vorschau erfolgen zu 100% lokal: Das CSS wird in Ihrem Browser aus Ihren Einstellungen berechnet, ohne dass Daten gesendet werden.