Glassmorphism-CSS-Generator

Erstelle einen Milchglas-Effekt (Glassmorphism) in CSS: Unschärfe, Transparenz, Sättigung, Rand und Schatten, mit Vorschau auf buntem Hintergrund oder deinem Foto.

Kostenlos
Ohne Anmeldung
Kein Datei-Upload
Windows, Mac, Android, iPhone

Werkzeug wird geladen…

Über dieses Werkzeug

Stelle einen Milchglas-Effekt (Glassmorphism) live ein: Stärke der Unschärfe, Deckkraft und Tönung des Glases, Sättigung, heller Rand, Eckenradius und Schatten. Sieh ihn auf bunten Hintergründen oder deinem eigenen Foto; der CSS-Code enthält die Safari-Variante.

Wann es hilft

Karten und Oberflächenbereiche

Eine Milchglas-Karte auf buntem Hintergrund wirkt modern und leicht – beliebt bei Dashboards und Landingpages.

Transparente Navigationsleiste

Eine gläserne Menüleiste lässt den scrollenden Inhalt durchscheinen und bleibt lesbar.

Modale Fenster

Den Hintergrund zu verwischen lenkt die Aufmerksamkeit auf den Dialog, ohne den Besucher ganz von der Seite zu trennen.

So funktioniert's

Wähle einen bunten Hintergrund oder dein eigenes Foto.
Stelle Unschärfe, Deckkraft, Tönung und Rand des Glases ein.
Kopiere den CSS-Code der Karte.

So funktioniert es

Der Code kombiniert einen halbtransparenten rgba()-Hintergrund, backdrop-filter mit blur() und optional saturate(), einen durchscheinend weißen Rand, der die Glaskante imitiert, einen Eckenradius und einen weichen Schatten.

Die Vorschau wird von deinem Browser mit genau demselben Code gerendert: Was du siehst, sehen auch deine Besucher. Dein Hintergrundfoto bleibt auf deinem Gerät.

Tipps für beste Ergebnisse

Der Effekt zeigt sich nur auf einem kontrastreichen Hintergrund: bunte Formen, ein Verlauf oder ein Foto.
10 bis 16 px Unschärfe und 15 bis 25 % Deckkraft ergeben den klassischsten Look.
Prüfe die Lesbarkeit des Textes auf der Karte: Erhöhe die Deckkraft bei unruhigen Hintergründen.
Eine Sättigung über 100 % lässt die durch das Glas gesehenen Farben kräftiger wirken.

Häufige Probleme und Lösungen

Die Unschärfe ist nicht zu sehen

backdrop-filter wirkt nur, wenn der Hintergrund des Elements transparent oder halbtransparent ist und etwas dahinter liegt.

Es funktioniert überall außer in Safari

Prüfe, ob die Zeile -webkit-backdrop-filter vorhanden ist: Safari braucht sie.

Der Text ist schwer lesbar

Erhöhe die Deckkraft des Hintergrunds, füge einen Textschatten hinzu oder wähle einen ruhigeren Hintergrund.

Häufige Fragen

Was ist Glassmorphism?

Ein Oberflächenstil, bei dem Bereiche wie Milchglas wirken: halbtransparent, verwischen sie, was dahinter liegt. Bekannt wurde er durch macOS Big Sur und Windows 11.

Welche CSS-Eigenschaft erzeugt den Effekt?

backdrop-filter: blur() verwischt den Hintergrund hinter dem Element. Es wird mit einem halbtransparenten Hintergrund kombiniert, sonst bleibt die Unschärfe unsichtbar.

Funktioniert es in Safari?

Ja, mit dem Präfix -webkit-backdrop-filter, das im erzeugten Code schon enthalten ist. Alle aktuellen Browser unterstützen den Effekt.

Bremst der Effekt die Seite aus?

Die Unschärfe berechnet die Grafikkarte. Bei wenigen Elementen merkt man nichts; vermeide sie auf sehr großen animierten Flächen.

Immer noch ein Problem?

Frag im Forum: Kategorie, Werkzeug, Datenblatt deines Geräts und Testergebnis werden automatisch ausgefüllt.