CSS-Glassmorphism-Generator — Milchglas-Effekt

CSS-Glassmorphism-Generator — Gestalten Sie den Milchglas-Effekt

Erstellen Sie schöne Glassmorphism-Effekte (Milchglas) mit einem visuellen Live-Editor. Passen Sie Unschärfe, Transparenz, Sättigung, Rand und Eckenradius an, beobachten Sie das Ergebnis sofort über einem farbenfrohen Hintergrund und kopieren Sie das einsatzbereite CSS. Der Milchglas-Look, den iOS, macOS Big Sur und Windows 11 populär gemacht haben, ist jetzt nur einen Klick entfernt.

Was ist Glassmorphism?

Glassmorphism ist ein Designstil, bei dem UI-Elemente wie Milchglas aussehen: ein halbtransparenter Hintergrund mit einer Unschärfe auf dem, was dahinter liegt, ein subtiler heller Rand und ein weicher Schatten. Die wichtigste CSS-Eigenschaft ist backdrop-filter: blur(), die den Inhalt hinter dem Element unscharf macht, nicht das Element selbst.

Die Steuerelemente

• Unschärfe: wie stark der Hintergrund hinter der Karte unscharf wird (der Kern des Effekts)
• Transparenz: die Deckkraft der Glastönung — niedriger lässt mehr Hintergrund durch
• Sättigung: verstärkt die Farben hinter dem Glas für ein satteres Aussehen
• Eckenradius: rundet die Ecken der Karte ab
• Randbreite: ein dünner heller Rand fügt die realistische Glaskante hinzu
• Tönung + Dunkelmodus: verschieben Sie das Glas zu einer Farbe oder wechseln Sie zu einer dunklen Glasvariante

Wichtig: backdrop-filter-Unterstützung

• Der Effekt beruht auf backdrop-filter, unterstützt in allen modernen Browsern
• Der Generator enthält das -webkit-backdrop-filter-Präfix für Safari
• Das Element muss über einem Inhalt oder Hintergrund liegen — auf einer weißen Seite gibt es nichts zum Unscharfmachen
• Vermeiden Sie Überunschärfe; 8 bis 16px sehen meist am besten aus

Designtipps

• Glassmorphism glänzt über farbenfrohen Verläufen oder Fotos — probieren Sie die Hintergrund-Voreinstellungen
• Halten Sie den Text kontrastreich, damit er über der Unschärfe lesbar bleibt
• Verwenden Sie es sparsam für Karten, Navigationsleisten oder Modale — nicht für ganze Seiten

Datenschutz

Dieses Tool läuft vollständig in Ihrem Browser. Nichts wird hochgeladen oder gespeichert.