CSS-Glassmorphism-Generator (Milchglas-Effekt)

So funktioniert es

Geben Sie links den Text ein, der in der Karte stehen soll; die Vorschau zeichnet damit eine Milchglas-Karte auf einem farbigen Hintergrund. Der Regler für die Unschärfe bestimmt, wie stark alles hinter der Karte verschwimmt: 10 Pixel reichen für die meisten Entwürfe, ab 20 Pixel ist der Hintergrund nicht mehr zu erkennen. Die Deckkraft der Füllung legt die Eigenfarbe des Glases fest: 25 % wird im Code zu rgba(255, 255, 255, 0.25). Niedrigere Werte machen das Glas klarer, den Text darauf aber schwerer lesbar. Die Sichtbarkeit des Rahmens steuert die feine helle Kante. Mit einer dunklen Farbe wie #0f172a entsteht Rauchglas für ein dunkles Design. Der Code schreibt die Unschärfe zweimal: -webkit-backdrop-filter für ältere Safari-Versionen und iPhones, backdrop-filter für alle anderen. Ganz unten erhöht ein @supports-Fallback die Deckkraft auf 85 %, wenn ein Browser den Effekt nicht kennt. Der Glaseffekt ist nur sichtbar, wenn hinter der Karte ein farbiges Bild oder Muster liegt.

Dieses Werkzeug ist auch als glassmorphism generator, glassmorphism css, milchglas effekt css, backdrop filter blur, glaseffekt css, Glas-Karte CSS bekannt.

Was ist Glassmorphism?

Glassmorphism ist ein Gestaltungsstil, der Bedienelemente wie Milchglas darstellt: halbtransparent, mit verschwommenem Hintergrund. Er verbreitete sich um 2020 mit macOS Big Sur von Apple und Microsofts Fluent Design. Der Stil schafft Tiefe zwischen Ebenen, braucht aber einen dekorativen Hintergrund und sorgfältig geprüften Textkontrast.

Was ist backdrop-filter?

backdrop-filter ist die CSS-Eigenschaft, die Filter wie blur(), brightness() oder saturate() auf den Bereich HINTER einem Element anwendet und nicht auf das Element selbst. Der Hintergrund des Elements muss dafür mindestens teilweise durchsichtig sein. Weil der Effekt beim Scrollen neu berechnet wird, kann er auf großen Flächen und schwachen Geräten Leistung kosten.

backdrop-filter oder filter: Was ist der Unterschied?

filter bearbeitet das Element SELBST: Mit filter: blur(10px) werden auch Text und Rahmen der Karte unscharf. backdrop-filter bearbeitet, was HINTER dem Element liegt; der eigene Text der Karte bleibt scharf, nur das durchscheinende Foto verschwimmt. Für eine Milchglas-Karte ist backdrop-filter die richtige Eigenschaft, filter dient zum Weichzeichnen eines Bildes oder ganzen Bereichs.

Vorsicht: Auf einfarbigem Hintergrund ist das Glas unsichtbar

backdrop-filter macht die Pixel HINTER der Karte unscharf. Liegt die Karte auf einer einzigen Fläche, gibt es nichts zu verwischen, und sie wirkt wie ein gewöhnlicher halbtransparenter Kasten. Glassmorphism braucht ein Foto, einen Verlauf oder Formen im Hintergrund.

Die zweite Falle ist die Lesbarkeit. Bei 10 % Deckkraft hängt der Kontrast des Textes ganz vom Bild dahinter ab, eine helle Stelle schluckt weiße Schrift. Halten Sie bei Karten mit Text die Deckkraft zwischen 20 und 40 % und prüfen Sie mit echtem Inhalt an der ungünstigsten Stelle des Hintergrunds. Für barrierefreie Seiten gilt auch hier das Kontrastverhältnis von 4,5:1.

Browserunterstützung und sinnvoller Einsatz

backdrop-filter funktioniert in allen aktuellen großen Browsern, die Details entscheiden:

• Safari und iPhones vor Version 18 verstehen nur die -webkit-Schreibweise → der Code enthält beide Zeilen
• Firefox unterstützte es erst ab Version 103 (2022) → der @supports-Fallback hält Text lesbar
• Starke Unschärfe kann auf schwachen Handys das Scrollen bremsen → bei Vollbild-Ebenen unter 20 Pixel bleiben
• Gut geeignet: Navigationsleisten, Dialogfenster, Karten über Fotos
• Weniger geeignet: lange Textabschnitte, Tabellen, Formulare

Häufige Fragen

Welche CSS-Eigenschaften braucht Glassmorphism?

Vier Teile genügen: ein halbtransparenter Hintergrund (rgba), backdrop-filter: blur() für die Unschärfe dahinter, ein dünner halbtransparenter Rahmen und ein weicher Schatten. border-radius rundet das Bild ab. Das Werkzeug schreibt alle fünf in eine Regel.

Warum steht dieselbe Zeile zweimal, einmal mit -webkit-?

Safari kannte backdrop-filter jahrelang nur als -webkit-backdrop-filter; den Namen ohne Präfix gibt es erst seit Safari 18 (2024). Ältere iPhones und Macs brauchen beide Zeilen. Browser überspringen Zeilen, die sie nicht kennen, die doppelte Angabe schadet also nicht.

Wie entsteht dunkles Rauchglas?

Tragen Sie eine dunkle Glasfarbe wie #0f172a ein, stellen Sie die Deckkraft auf 30 bis 50 % und lassen Sie den Rahmen bei etwa 10 %. Der Text in der Karte sollte dann weiß sein.

Was speichert Herunterladen?

Die Vorschau als PNG mit 1200×800 Pixeln. Den Code übernehmen Sie mit "Ausgabe kopieren". Die Unschärfe der Vorschau zeichnet der Canvas-Filter des Browsers; ältere Browser ohne diesen Filter zeigen die Vorschau eventuell scharf, das CSS ist davon nicht betroffen.